mirror of
https://github.com/xsf0105/vue3-h5-template.git
synced 2025-04-05 19:41:57 +08:00
20160818/17:47
This commit is contained in:
xsf
commit
452e55b192
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
node_modules/
|
||||
build/
|
||||
d.html
|
||||
npm-debug.log
|
||||
6
.idea/encodings.xml
generated
Normal file
6
.idea/encodings.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="Encoding">
|
||||
<file url="PROJECT" charset="UTF-8" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/vue-vueRouter-webpack.iml" filepath="$PROJECT_DIR$/.idea/vue-vueRouter-webpack.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
11
.idea/vue-vueRouter-webpack.iml
generated
Normal file
11
.idea/vue-vueRouter-webpack.iml
generated
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.idea" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/node_modules" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
669
.idea/workspace.xml
generated
Normal file
669
.idea/workspace.xml
generated
Normal file
@ -0,0 +1,669 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="587a2bed-7449-49ab-934b-baf56ef55cef" name="Default" comment="" />
|
||||
<ignored path="vue-vueRouter-webpack.iws" />
|
||||
<ignored path=".idea/workspace.xml" />
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
<option name="TRACKING_ENABLED" value="true" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="ChangesViewManager" flattened_view="true" show_ignored="false" />
|
||||
<component name="CreatePatchCommitExecutor">
|
||||
<option name="PATCH_PATH" value="" />
|
||||
</component>
|
||||
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
|
||||
<component name="FavoritesManager">
|
||||
<favorites_list name="vue-vueRouter-webpack" />
|
||||
</component>
|
||||
<component name="FileEditorManager">
|
||||
<splitter split-orientation="horizontal" split-proportion="0.59637564">
|
||||
<split-first>
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<file leaf-file-name="index.vue" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/views/index.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="6" column="25" selection-start-line="6" selection-start-column="25" selection-end-line="6" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="filters.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/filters.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="25" column="0" selection-start-line="25" selection-start-column="0" selection-end-line="25" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="readme.md" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/readme.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
|
||||
<state split_layout="FIRST">
|
||||
<first_editor vertical-scroll-proportion="0.07702703">
|
||||
<caret line="3" column="9" selection-start-line="3" selection-start-column="9" selection-end-line="3" selection-end-column="9" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
<provider editor-type-id="MarkdownFxPreviewEditor">
|
||||
<state />
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="index.html" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="15" column="0" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="Vue教程.md" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/Vue教程.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
|
||||
<state split_layout="FIRST">
|
||||
<first_editor vertical-scroll-proportion="0.0">
|
||||
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
<provider editor-type-id="MarkdownFxPreviewEditor">
|
||||
<state />
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="vueComponent.sublime-snippet" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/vueComponent.sublime-snippet">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="1" column="22" selection-start-line="1" selection-start-column="22" selection-end-line="1" selection-end-column="22" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="search.vue" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/views/search.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="12" column="10" selection-start-line="12" selection-start-column="10" selection-end-line="12" selection-end-column="10" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="about.vue" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/views/about.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="13" column="24" selection-start-line="13" selection-start-column="24" selection-end-line="13" selection-end-column="24" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="routers.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/routers.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="67" column="0" selection-start-line="67" selection-start-column="0" selection-end-line="67" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="webpack.config.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/webpack.config.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="23" column="3" selection-start-line="23" selection-start-column="3" selection-end-line="23" selection-end-column="3" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
</leaf>
|
||||
</split-first>
|
||||
<split-second>
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<file leaf-file-name="home.vue" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/views/home.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="20" column="9" selection-start-line="20" selection-start-column="9" selection-end-line="20" selection-end-column="9" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="package.json" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.76692706">
|
||||
<caret line="37" column="10" selection-start-line="37" selection-start-column="10" selection-end-line="37" selection-end-column="10" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
</leaf>
|
||||
</split-second>
|
||||
</splitter>
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="IdeDocumentHistory">
|
||||
<option name="CHANGED_PATHS">
|
||||
<list>
|
||||
<option value="$PROJECT_DIR$/src/views/my_views_detail.vue" />
|
||||
<option value="$PROJECT_DIR$/src/views/home.vue" />
|
||||
<option value="$PROJECT_DIR$/src/app.js" />
|
||||
<option value="$PROJECT_DIR$/src/css/common.css" />
|
||||
<option value="$PROJECT_DIR$/src/app.vue" />
|
||||
<option value="$PROJECT_DIR$/src/views/my_views.vue" />
|
||||
<option value="$PROJECT_DIR$/src/views/index.vue" />
|
||||
<option value="$PROJECT_DIR$/src/views/news.vue" />
|
||||
<option value="$PROJECT_DIR$/src/components/select.vue" />
|
||||
<option value="$PROJECT_DIR$/src/views/about.vue" />
|
||||
<option value="$PROJECT_DIR$/src/css/testInAbout.css" />
|
||||
<option value="$PROJECT_DIR$/src/views/search.vue" />
|
||||
<option value="$PROJECT_DIR$/webpack.config.js" />
|
||||
<option value="$PROJECT_DIR$/package.json" />
|
||||
<option value="$PROJECT_DIR$/src/routers.js" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
<option value="$PROJECT_DIR$/readme.md" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="JsBuildToolGruntFileManager" detection-done="true" />
|
||||
<component name="JsBuildToolPackageJson" detection-done="true">
|
||||
<package-json value="$PROJECT_DIR$/package.json" />
|
||||
</component>
|
||||
<component name="JsGulpfileManager">
|
||||
<detection-done>true</detection-done>
|
||||
</component>
|
||||
<component name="ProjectFrameBounds">
|
||||
<option name="x" value="263" />
|
||||
<option name="y" value="20" />
|
||||
<option name="width" value="1625" />
|
||||
<option name="height" value="956" />
|
||||
</component>
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="false">
|
||||
<OptionsSetting value="true" id="Add" />
|
||||
<OptionsSetting value="true" id="Remove" />
|
||||
<OptionsSetting value="true" id="Checkout" />
|
||||
<OptionsSetting value="true" id="Update" />
|
||||
<OptionsSetting value="true" id="Status" />
|
||||
<OptionsSetting value="true" id="Edit" />
|
||||
<ConfirmationsSetting value="0" id="Add" />
|
||||
<ConfirmationsSetting value="0" id="Remove" />
|
||||
</component>
|
||||
<component name="ProjectView">
|
||||
<navigator currentView="ProjectPane" proportions="" version="1">
|
||||
<flattenPackages />
|
||||
<showMembers />
|
||||
<showModules />
|
||||
<showLibraryContents />
|
||||
<hideEmptyPackages />
|
||||
<abbreviatePackageNames />
|
||||
<autoscrollToSource />
|
||||
<autoscrollFromSource />
|
||||
<sortByType />
|
||||
<manualOrder />
|
||||
<foldersAlwaysOnTop value="true" />
|
||||
</navigator>
|
||||
<panes>
|
||||
<pane id="Scratches" />
|
||||
<pane id="Scope" />
|
||||
<pane id="ProjectPane">
|
||||
<subPane>
|
||||
<PATH>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="vue-vueRouter-webpack" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
|
||||
</PATH_ELEMENT>
|
||||
</PATH>
|
||||
<PATH>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="vue-vueRouter-webpack" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="vue-vueRouter-webpack" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
</PATH>
|
||||
<PATH>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="vue-vueRouter-webpack" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="vue-vueRouter-webpack" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="src" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
</PATH>
|
||||
</subPane>
|
||||
</pane>
|
||||
</panes>
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="settings.editor.selected.configurable" value="web-ide.project.structure" />
|
||||
<property name="settings.editor.splitter.proportion" value="0.2" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||
<property name="HbShouldOpenHtmlAsHb" value="" />
|
||||
<property name="js-jscs-nodeInterpreter" value="C:\Program Files\nodejs\node.exe" />
|
||||
</component>
|
||||
<component name="RunManager" selected="JavaScript Debug.index.html">
|
||||
<configuration default="false" name="index.html" type="JavascriptDebugType" factoryName="JavaScript Debug" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/vue-vueRouter-webpack/index.html">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="DartTestRunConfigurationType" factoryName="Dart Test">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma" config-file="">
|
||||
<envs />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" working-dir="">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
|
||||
<option name="cucumberJsArguments" value="" />
|
||||
<option name="executablePath" />
|
||||
<option name="filePath" />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
|
||||
<node-options />
|
||||
<gulpfile />
|
||||
<tasks />
|
||||
<arguments />
|
||||
<envs />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="js.build_tools.npm" factoryName="npm">
|
||||
<command value="run-script" />
|
||||
<scripts />
|
||||
<envs />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="mocha-javascript-test-runner" factoryName="Mocha">
|
||||
<node-options />
|
||||
<working-directory>$PROJECT_DIR$</working-directory>
|
||||
<pass-parent-env>true</pass-parent-env>
|
||||
<envs />
|
||||
<ui>bdd</ui>
|
||||
<extra-mocha-options />
|
||||
<test-kind>DIRECTORY</test-kind>
|
||||
<test-directory />
|
||||
<recursive>false</recursive>
|
||||
<method />
|
||||
</configuration>
|
||||
<list size="1">
|
||||
<item index="0" class="java.lang.String" itemvalue="JavaScript Debug.index.html" />
|
||||
</list>
|
||||
<recent_temporary>
|
||||
<list size="1">
|
||||
<item index="0" class="java.lang.String" itemvalue="JavaScript Debug.index.html" />
|
||||
</list>
|
||||
</recent_temporary>
|
||||
</component>
|
||||
<component name="ShelveChangesManager" show_recycled="false" />
|
||||
<component name="SvnConfiguration">
|
||||
<configuration />
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="587a2bed-7449-49ab-934b-baf56ef55cef" name="Default" comment="" />
|
||||
<created>1471498492040</created>
|
||||
<option name="number" value="Default" />
|
||||
<updated>1471498492040</updated>
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="ToolWindowManager">
|
||||
<frame x="263" y="20" width="1625" height="956" extended-state="1" />
|
||||
<editor active="true" />
|
||||
<layout>
|
||||
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.16572149" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
|
||||
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
|
||||
<window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
|
||||
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="true" content_ui="tabs" />
|
||||
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
|
||||
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.30286345" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
|
||||
</layout>
|
||||
</component>
|
||||
<component name="Vcs.Log.UiProperties">
|
||||
<option name="RECENTLY_FILTERED_USER_GROUPS">
|
||||
<collection />
|
||||
</option>
|
||||
<option name="RECENTLY_FILTERED_BRANCH_GROUPS">
|
||||
<collection />
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsContentAnnotationSettings">
|
||||
<option name="myLimit" value="2678400000" />
|
||||
</component>
|
||||
<component name="XDebuggerManager">
|
||||
<breakpoint-manager />
|
||||
<watches-manager />
|
||||
</component>
|
||||
<component name="editorHistoryManager">
|
||||
<entry file="file://$PROJECT_DIR$/src/views/index.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="6" column="25" selection-start-line="6" selection-start-column="25" selection-end-line="6" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/filters.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="25" column="0" selection-start-line="25" selection-start-column="0" selection-end-line="25" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/readme.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
|
||||
<state split_layout="FIRST">
|
||||
<first_editor vertical-scroll-proportion="0.0">
|
||||
<caret line="56" column="2" selection-start-line="56" selection-start-column="2" selection-end-line="56" selection-end-column="2" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
<provider editor-type-id="MarkdownFxPreviewEditor">
|
||||
<state />
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="15" column="0" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/Vue教程.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
|
||||
<state split_layout="FIRST">
|
||||
<first_editor vertical-scroll-proportion="0.0">
|
||||
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
<provider editor-type-id="MarkdownFxPreviewEditor">
|
||||
<state />
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/vueComponent.sublime-snippet">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="1" column="22" selection-start-line="1" selection-start-column="22" selection-end-line="1" selection-end-column="22" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/search.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="12" column="10" selection-start-line="12" selection-start-column="10" selection-end-line="12" selection-end-column="10" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/about.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="13" column="24" selection-start-line="13" selection-start-column="24" selection-end-line="13" selection-end-column="24" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/routers.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="67" column="0" selection-start-line="67" selection-start-column="0" selection-end-line="67" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/webpack.config.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="23" column="3" selection-start-line="23" selection-start-column="3" selection-end-line="23" selection-end-column="3" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/home.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="20" column="9" selection-start-line="20" selection-start-column="9" selection-end-line="20" selection-end-column="9" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/app.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/css/common.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="1.0461725">
|
||||
<caret line="47" column="0" selection-start-line="47" selection-start-column="0" selection-end-line="47" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/app.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="20" column="5" selection-start-line="20" selection-start-column="5" selection-end-line="20" selection-end-column="5" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/components/select.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="1.2753129">
|
||||
<caret line="59" column="20" selection-start-line="59" selection-start-column="20" selection-end-line="59" selection-end-column="20" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/css/animate.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-2.4383078">
|
||||
<caret line="17" column="31" selection-start-line="17" selection-start-column="31" selection-end-line="17" selection-end-column="31" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/news.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="17" column="13" selection-start-line="17" selection-start-column="13" selection-end-line="17" selection-end-column="13" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/my_views.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.2777101">
|
||||
<caret line="12" column="0" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/index.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="6" column="25" selection-start-line="6" selection-start-column="25" selection-end-line="6" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/about.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="13" column="24" selection-start-line="13" selection-start-column="24" selection-end-line="13" selection-end-column="24" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/app.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.21615472">
|
||||
<caret line="10" column="35" selection-start-line="10" selection-start-column="35" selection-end-line="10" selection-end-column="35" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/css/testInAbout.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.31257343">
|
||||
<caret line="14" column="21" selection-start-line="14" selection-start-column="21" selection-end-line="14" selection-end-column="21" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/filters.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="25" column="0" selection-start-line="25" selection-start-column="0" selection-end-line="25" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/search.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="12" column="10" selection-start-line="12" selection-start-column="10" selection-end-line="12" selection-end-column="10" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/views/home.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="20" column="9" selection-start-line="20" selection-start-column="9" selection-end-line="20" selection-end-column="9" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/webpack.config.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="23" column="3" selection-start-line="23" selection-start-column="3" selection-end-line="23" selection-end-column="3" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.76692706">
|
||||
<caret line="37" column="10" selection-start-line="37" selection-start-column="10" selection-end-line="37" selection-end-column="10" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/routers.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="67" column="0" selection-start-line="67" selection-start-column="0" selection-end-line="67" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="15" column="0" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/Vue教程.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
|
||||
<state split_layout="FIRST">
|
||||
<first_editor vertical-scroll-proportion="0.0">
|
||||
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
<provider editor-type-id="MarkdownFxPreviewEditor">
|
||||
<state />
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/vueComponent.sublime-snippet">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="1" column="22" selection-start-line="1" selection-start-column="22" selection-end-line="1" selection-end-column="22" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/readme.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
|
||||
<state split_layout="FIRST">
|
||||
<first_editor vertical-scroll-proportion="0.07702703">
|
||||
<caret line="3" column="9" selection-start-line="3" selection-start-column="9" selection-end-line="3" selection-end-column="9" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
<provider editor-type-id="MarkdownFxPreviewEditor">
|
||||
<state />
|
||||
</provider>
|
||||
</entry>
|
||||
</component>
|
||||
</project>
|
||||
65
Vue教程.md
Normal file
65
Vue教程.md
Normal file
@ -0,0 +1,65 @@
|
||||
#Vue教程
|
||||
|
||||
[细节与最佳实践](http://vuejs.org/guide/best-practices.html)
|
||||
|
||||
[Vue1.0.x文档](http://vuejs.org/)
|
||||
|
||||
[Vue1.0.x绑定语法参考](https://github.com/vuejs/vue/issues/1325)
|
||||
|
||||
[每次更新的变化](https://github.com/vuejs/vue/releases)
|
||||
|
||||
与webpack 一起使用所需插件
|
||||
|
||||
[vue-loader-example](https://github.com/vuejs/vue-loader-example)
|
||||
|
||||
[vue-html-loader](https://github.com/vuejs/vue-html-loader)
|
||||
|
||||
####文章
|
||||
`尤小右`
|
||||
|
||||
[Vue.js：轻量高效的前端组件化方案](http://www.csdn.net/article/1970-01-01/2825439)
|
||||
|
||||
`勾三股四`
|
||||
|
||||
[Vue + webpack 项目实践](http://jiongks.name/blog/just-vue/)
|
||||
|
||||
[Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review/)
|
||||
|
||||
`稀土掘金`
|
||||
|
||||
[Vue 组件化开发实践](http://ftandy.github.io/2015/09/05/vue/)
|
||||
|
||||
`Randy`
|
||||
|
||||
[Vue.js 和 Webpack（一）为什么使用Vue](http://djyde.github.io/2015/08/29/vuejs-and-webpack-1.html)
|
||||
|
||||
[Vue.js 和 Webpack（二）使用webpack](http://djyde.github.io/2015/08/30/vuejs-and-webpack-2.html)
|
||||
|
||||
[Vue.js 和 Webpack（三）Vue.js + Webpack](http://djyde.github.io/2015/08/31/vuejs-and-webpack-3.html)
|
||||
|
||||
#webpack教程
|
||||
[learn-webpack](http://vingojw.github.io/2015/08/19/learn-webpack/)
|
||||
|
||||
#Vue-router教程
|
||||
[中文文档](http://vuejs.github.io/vue-router/zh-cn/index.html) - [英文文档](http://vuejs.github.io/vue-router/en/index.html)
|
||||
[学习笔记](https://github.com/vingojw/learn-vue-router)
|
||||
|
||||
#技术交流
|
||||
|
||||
[Vue技术论坛](http://forum.vuejs.org/)
|
||||
|
||||
[Vue的聊天室，很多人在里面讨论并解决问题](https://gitter.im/vuejs/vue)
|
||||
|
||||
#demo
|
||||
|
||||
[qingcheng](https://github.com/zerqu/qingcheng)
|
||||
|
||||
[vue-strap 用vue实现bootstrap](https://github.com/yuche/vue-strap)
|
||||
|
||||
[vue-mui](https://github.com/mennghao/vue-mui)
|
||||
|
||||
[通过学习（copy）以上两个demo，使用 Vue1.0 + VueRouter + webpack](https://github.com/vingojw/vue-vueRoute-webpack)
|
||||
|
||||
[Chat by Vue + Webpack](https://github.com/Coffcer/vue-chat)
|
||||
|
||||
[用Vue实现的拖拽效果](http://jsfiddle.net/lain8dono/mrnyf79e/)
|
||||
15
index.html
Normal file
15
index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
|
||||
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
|
||||
<meta content="yes" name=" apple-mobile-web-app-capable" />
|
||||
<title>首页</title>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<link href="/build/style.8d41621aca1be2aa0c2a.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/build/vendor.8d41621aca1be2aa0c2a.js"></script><script src="/build/build.8d41621aca1be2aa0c2a.js"></script></body>
|
||||
</html>
|
||||
11
index.tpl
Normal file
11
index.tpl
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
46
package.json
Normal file
46
package.json
Normal file
@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "learn-webpack",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"extract-text-webpack-plugin": "^0.8.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.3.17",
|
||||
"babel-loader": "^6.2.0",
|
||||
"babel-plugin-transform-runtime": "^6.3.13",
|
||||
"babel-preset-es2015": "^6.3.13",
|
||||
"babel-runtime": "^5.8.34",
|
||||
"css-loader": "^0.23.0",
|
||||
"cssnext-loader": "^1.0.1",
|
||||
"fastclick": "^1.0.6",
|
||||
"file-loader": "^0.8.4",
|
||||
"hammerjs": "^2.0.6",
|
||||
"html-loader": "^0.3.0",
|
||||
"html-webpack-plugin": "^1.6.2",
|
||||
"jshint-loader": "^0.8.3",
|
||||
"style-loader": "^0.13.0",
|
||||
"swiper": "^3.2.0",
|
||||
"url-loader": "^0.5.6",
|
||||
"vue": "^1.0.20",
|
||||
"vue-hot-reload-api": "^1.2.2",
|
||||
"vue-html-loader": "^1.1.0",
|
||||
"vue-loader": "^8.2.0",
|
||||
"vue-router": "^0.7.11",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"webpack": "^1.12.9",
|
||||
"webpack-dev-server": "^1.14.0",
|
||||
"webpack-zepto": "0.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"mb": "export PRODUCTION=1 && webpack --progress --hide-modules",
|
||||
"wb": "set PRODUCTION=1 && webpack --progress --hide-modules",
|
||||
"start": "webpack-dev-server --progress --profile --colors --inline ",
|
||||
"port": "webpack-dev-server --progress --colors --inline --port 9090 ",
|
||||
"hot": "webpack-dev-server --progress --colors --inline --hot",
|
||||
"cp": "cp -r index.html ./build/ d:/wamp/www/vue",
|
||||
"ip": "webpack-dev-server --progress --colors --hot --host=0.0.0.0 --port 9000"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
58
readme.md
Normal file
58
readme.md
Normal file
@ -0,0 +1,58 @@
|
||||
## Setup
|
||||
``` bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
访问 localhost:8080
|
||||
|
||||
如果想在手机上查看
|
||||
|
||||
```
|
||||
npm run ip
|
||||
```
|
||||
访问 你本地的ip:9000
|
||||
|
||||
## 版本控制，打包压缩
|
||||
MAC
|
||||
|
||||
```
|
||||
npm run mb
|
||||
```
|
||||
|
||||
windows
|
||||
|
||||
```
|
||||
npm run wb
|
||||
```
|
||||
|
||||
## 目录结构
|
||||
<pre>
|
||||
│ .gitignore # 忽略无需git控制的文件 比如 node_modules
|
||||
│ package.json # 项目配置
|
||||
│ readme.md # 项目说明
|
||||
│ index.html # 首页
|
||||
│ index.tpl # 首页模板 在发布的时候 执行 PRODUCTION=1 webpack 会生成一个d.html并注入脚本，样式，达到版本控制的目的
|
||||
│ webpack.config.js # webpack 配置文件
|
||||
│
|
||||
├─node_modules
|
||||
└─src
|
||||
│ app.js # 启动配置，配置路由，过滤器
|
||||
│ app.vue # 主vue
|
||||
│ filters.js # 过滤器
|
||||
│ routers.js # 路由
|
||||
│
|
||||
├─components # 组件
|
||||
│ my-component.vue
|
||||
│
|
||||
├─css # 公用样式
|
||||
│ common.css
|
||||
│
|
||||
└─views # 页面
|
||||
about.vue
|
||||
home.vue
|
||||
not-found.vue
|
||||
</pre>
|
||||
|
||||
##学习参考：
|
||||
待续
|
||||
|
||||
33
src/app.js
Normal file
33
src/app.js
Normal file
@ -0,0 +1,33 @@
|
||||
|
||||
require('./css/common.css');//加载公共样式
|
||||
require('./css/animate.css');//加载公共样式
|
||||
|
||||
var Vue = require('vue');
|
||||
var VueRouter = require('vue-router');
|
||||
var fastclick = require('fastclick');
|
||||
fastclick.attach(document.body);
|
||||
|
||||
// register filters 自定义过滤器 金额格式化，
|
||||
var filters = require('./filters');
|
||||
|
||||
Object.keys(filters).forEach(function(k) {
|
||||
Vue.filter(k, filters[k]);
|
||||
});
|
||||
|
||||
var App = Vue.extend(require('./app.vue'));
|
||||
Vue.use(VueRouter);
|
||||
|
||||
var router = new VueRouter(
|
||||
{
|
||||
hashbang: true, //为true的时候 example.com/#!/foo/bar ， false的时候 example.com/#/foo/bar
|
||||
//abstract:true, //地址栏不会有变化
|
||||
//以下设置需要服务端设置
|
||||
//history: false, //当使用 HTML5 history 模式时，服务器需要被正确配置 以防用户在直接访问链接时会遇到404页面。
|
||||
//saveScrollPosition: false
|
||||
linkActiveClass:'custom-active-class' //全局设置连接匹配时的类名 参考http://vuejs.github.io/vue-router/en/link.html
|
||||
}
|
||||
);
|
||||
|
||||
require('./routers')(router);
|
||||
|
||||
router.start(App,'#app');
|
||||
73
src/app.vue
Normal file
73
src/app.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<style>
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.fixed-bottom div {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.fixed-bottom a {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #7a7a7a;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="app">
|
||||
<!--v-text="item.name"-->
|
||||
<!--<footer class="fixed-bottom clearfix">-->
|
||||
<!--<a v-for="item in items" v-link="item" v-text="item.name">{{$index}}</a>-->
|
||||
<!--</footer>-->
|
||||
|
||||
<footer class="fixed-bottom clearfix">
|
||||
<div class="col4" v-for="item in items" v-link="item">
|
||||
<a class="cur" href="" v-text="item.name">{{$index}}</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<router-view></router-view>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
module.exports = {
|
||||
data: function() {
|
||||
return {
|
||||
items:{
|
||||
'/':{
|
||||
name:'index'
|
||||
},
|
||||
'/news': {
|
||||
name:'news'
|
||||
},
|
||||
'/search/:viewId': {
|
||||
name:'search'
|
||||
},
|
||||
'/about':{
|
||||
name:'about'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
components:{
|
||||
// modal:require('./components/modal.vue'),
|
||||
},
|
||||
created:function(){
|
||||
|
||||
},
|
||||
methods:{}
|
||||
}
|
||||
|
||||
</script>
|
||||
109
src/components/select.vue
Normal file
109
src/components/select.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- div.select_components_mask 类根据堆叠关系 不用设置z-index -->
|
||||
<div class="select_components_mask" v-show="show" @click.stop="show=false"></div>
|
||||
<slot name="title">default title</slot>
|
||||
<div class="select" @click.stop="show=!show">
|
||||
<div class="select-content">{{chooseval}}</div>
|
||||
<div class="select_arrow">
|
||||
<span></span>
|
||||
</div>
|
||||
<ul class="select_wrap" :class="{ 'hide': !show }">
|
||||
<li v-for="d in items" :class="{ 'hover': d.hover }" @mouseout="mouseout(d,$index)" @mouseover="mouseover(d,$index)" @click="choose"> {{ d.text }} </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: ['items'],
|
||||
data:function(){
|
||||
return {
|
||||
show : false,
|
||||
ishover:false,
|
||||
chooseval:'请选择'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
mouseover:function(item,index){
|
||||
item.hover = true;
|
||||
},
|
||||
mouseout:function(item,index){
|
||||
item.hover = false;
|
||||
},
|
||||
choose:function(e){
|
||||
this.chooseval = e.target.innerHTML;
|
||||
},
|
||||
hideWrap:function(){
|
||||
this.show = false;
|
||||
console.log('隐藏hideWrap');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.select_components_mask{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.select{
|
||||
height:40px;
|
||||
position: relative;
|
||||
border:1px solid #000;
|
||||
background:#fff;
|
||||
color:#949494;
|
||||
}
|
||||
.select-content{
|
||||
margin-top:12px;
|
||||
margin-left: 20px;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.select_arrow{
|
||||
width:38px;
|
||||
height:38px;
|
||||
position: absolute;
|
||||
right:1px;
|
||||
top:1px;
|
||||
background:#000;
|
||||
}
|
||||
.select_arrow span{
|
||||
position:absolute;
|
||||
margin: 13px -5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 14px solid #fff;
|
||||
}
|
||||
.select_wrap{
|
||||
margin: 0 0 0 -1px;;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
border:1px solid #000;
|
||||
background:#fff;
|
||||
}
|
||||
.select_wrap li{
|
||||
height:40px;
|
||||
line-height: 40px;
|
||||
padding-left:18px;
|
||||
color:#000;
|
||||
list-style: none;
|
||||
}
|
||||
.select_wrap li.hover{
|
||||
background:#949494;
|
||||
}
|
||||
.select_wrap.hide{
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
165
src/css/animate.css
vendored
Normal file
165
src/css/animate.css
vendored
Normal file
@ -0,0 +1,165 @@
|
||||
/*所有的动画*/
|
||||
.slideleft-enter {
|
||||
animation:slideleft-in .3s;
|
||||
}
|
||||
.slideleft-leave {
|
||||
animation:slideleft-out .3s;
|
||||
}
|
||||
.slideright-enter {
|
||||
animation:slideright-in .3s;
|
||||
}
|
||||
.slideright-leave {
|
||||
animation:slideright-out .3s;
|
||||
}
|
||||
.slidetop-enter {
|
||||
animation:slidetop-in .3s;
|
||||
}
|
||||
.slidetop-leave {
|
||||
animation:slidetop-out .3s;
|
||||
}
|
||||
.slidebottom-enter {
|
||||
animation:slidebottom-in .3s;
|
||||
}
|
||||
.slidebottom-leave {
|
||||
animation:slidebottom-out .3s;
|
||||
}
|
||||
@keyframes slideleft-in {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideleft-out {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideright-in {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideright-out {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slidetop-in {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidetop-out {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slidebottom-in {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slidebottom-out {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*切换效果 -- 渐隐*/
|
||||
.fadein-enter{
|
||||
animation:fadein-in 0.3s ease;
|
||||
}
|
||||
.fadein-leave{
|
||||
animation:fadein-out 0.3s ease;
|
||||
}
|
||||
|
||||
/*切换效果 -- 从右渐入*/
|
||||
.fadeInRight-enter {
|
||||
animation:fadeInRight-in 0.3s ease;
|
||||
}
|
||||
.fadeInRight-leave{
|
||||
animation:fadeInRight-out 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadein-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadein-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fadeInRight-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px,0,0)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none
|
||||
}
|
||||
}
|
||||
@keyframes fadeInRight-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: none
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px,0,0)
|
||||
}
|
||||
}
|
||||
3
src/css/b.css
Normal file
3
src/css/b.css
Normal file
@ -0,0 +1,3 @@
|
||||
.bbb{
|
||||
background:black;
|
||||
}
|
||||
81
src/css/common.css
Normal file
81
src/css/common.css
Normal file
@ -0,0 +1,81 @@
|
||||
@charset "utf-8";
|
||||
@charset "utf-8";
|
||||
|
||||
/*清零*/
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}
|
||||
fieldset,img { border:0;}
|
||||
ol,ul { list-style:none; }
|
||||
h1,h2,h3,h4,h5,h6,button,input,select,textarea { font-size:100%;
|
||||
font-weight: normal; }
|
||||
button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; }
|
||||
table{ border-collapse: collapse; border-spacing: 0; }
|
||||
i, cite, em, var, dfn, address { font-style: normal; }
|
||||
body{ font:14px "方正兰亭细黑简体","微软雅黑","宋体",Arial;}
|
||||
a{ text-decoration:none; outline: none;}
|
||||
a:hover{ text-decoration: none; }
|
||||
a:active, a:focus{ outline:none; }
|
||||
b{ font-weight: normal; }
|
||||
input ,button{ border: none; outline: none;}
|
||||
input:not([type="radio"]){appearance:none;-webkit-appearance:none;-o-appearance:none;-moz-appearance:none;}
|
||||
button:active{
|
||||
transform:scale(0.9);
|
||||
-webkit-transform: scale(0.9);
|
||||
-moz-transform: scale(0.9);
|
||||
-ms-transform: scale(0.9);
|
||||
-o-transform: scale(0.9);
|
||||
}
|
||||
textarea{
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-o-appearance: none;
|
||||
resize: none;
|
||||
}
|
||||
input{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a{
|
||||
color: #232323;
|
||||
}
|
||||
button{
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: require('iconfont.woff') format('woff'),
|
||||
require('iconfont.ttf') format('truetype'),
|
||||
require('iconfont.svg#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.col2{
|
||||
width: 50%;
|
||||
}
|
||||
.col3{
|
||||
width: 33.33%;
|
||||
}
|
||||
.col4{
|
||||
width: 25%;
|
||||
}
|
||||
.col6{
|
||||
width: 16.66%;
|
||||
}
|
||||
|
||||
19
src/css/testInAbout.css
Normal file
19
src/css/testInAbout.css
Normal file
@ -0,0 +1,19 @@
|
||||
h2{
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
span{
|
||||
font-size: 15px;
|
||||
color: red;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.about img{
|
||||
width: 180px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
.about{
|
||||
padding-top: 15px;
|
||||
}
|
||||
78
src/filters.js
Normal file
78
src/filters.js
Normal file
@ -0,0 +1,78 @@
|
||||
|
||||
|
||||
function timeago(time) {
|
||||
time = new Date(time);
|
||||
var delta = parseInt((new Date() - time) / 1000, 10);
|
||||
if (delta <= 0) return 'just now';
|
||||
|
||||
var minutes = delta / 60;
|
||||
if (minutes < 1) return 'less than a minute ago';
|
||||
if (minutes < 2) return 'about a minute ago';
|
||||
|
||||
var hours = minutes / 60;
|
||||
if (hours < 1) return parseInt(minutes, 10) + ' minutes ago';
|
||||
if (hours < 1.5) return 'about an hour ago';
|
||||
|
||||
var days = hours / 24;
|
||||
if (days < 1) return Math.round(hours) + ' hours ago';
|
||||
if (days < 7) return parseInt(days, 10) + ' days ago';
|
||||
|
||||
var month = time.getMonth();
|
||||
if (month < 10) month = '0' + month;
|
||||
var date = time.getDate();
|
||||
if (date < 10) date = '0' + date;
|
||||
return [time.getFullYear(), month, date].join('-');
|
||||
}
|
||||
|
||||
|
||||
function urlize(text) {
|
||||
if (!text) return '';
|
||||
var pattern = /https?:\/\/[^\s<]+[^<.,:;"')\]\s]/g;
|
||||
return text.replace(pattern, function(u) {
|
||||
var t = u.replace('http://', '');
|
||||
return '<a href="' + u + '">' + t + '</a>';
|
||||
});
|
||||
}
|
||||
|
||||
//获取图片地址，如果地址带有 http://那么就认为是绝对地址，然后直接返回
|
||||
function imgUrl(url){
|
||||
if(url.match(/http:\/\//)){
|
||||
return url;
|
||||
}
|
||||
|
||||
//全站统一配置，页面首先会引用
|
||||
if(window.abp){
|
||||
return window.abp.imageDomain + url;
|
||||
}
|
||||
var testUrl = 'http://img.yaomaiche.com'; //此url到时候走配置
|
||||
|
||||
if(this.isTest){
|
||||
testUrl = 'http://img.test.yaomaiche.com';
|
||||
}
|
||||
return testUrl + url;
|
||||
}
|
||||
|
||||
|
||||
//显示价格
|
||||
function price(value,currency){
|
||||
var digitsRE = /(\d{3})(?=\d)/g
|
||||
value = parseFloat(value)
|
||||
if (!isFinite(value) || (!value && value !== 0)) return ''
|
||||
currency = currency != null ? currency : '¥'
|
||||
var stringified = Math.abs(value).toFixed(2)
|
||||
var _int = stringified.slice(0, -3)
|
||||
var i = _int.length % 3
|
||||
var head = i > 0
|
||||
? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
|
||||
: ''
|
||||
var _float = stringified.slice(-3)
|
||||
var sign = value < 0 ? '-' : ''
|
||||
return currency + sign + head +
|
||||
_int.slice(i).replace(digitsRE, '$1,') +
|
||||
_float
|
||||
}
|
||||
|
||||
exports.imgUrl = imgUrl;
|
||||
exports.price = price;
|
||||
exports.timeago = timeago;
|
||||
exports.urlize = urlize;
|
||||
BIN
src/images/logo.png
Normal file
BIN
src/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
76
src/routers.js
Normal file
76
src/routers.js
Normal file
@ -0,0 +1,76 @@
|
||||
module.exports = function(router){
|
||||
router.map({
|
||||
'/':{
|
||||
name:'index',
|
||||
component: require('./views/index.vue')
|
||||
},
|
||||
'/news':{
|
||||
name:'news',
|
||||
component: function(reslove){
|
||||
return require(['./views/news.vue'],reslove)
|
||||
}
|
||||
},
|
||||
'/search': {
|
||||
name:'search',
|
||||
component: require('./views/search.vue')
|
||||
},
|
||||
'/about/:viewId': {
|
||||
name:'about',
|
||||
component: require('./views/about.vue'),
|
||||
auth: true // 此页面需要用户登录
|
||||
},
|
||||
'/my_views': {
|
||||
name:'my_views',
|
||||
component: require('./views/my_views.vue')
|
||||
},
|
||||
});
|
||||
|
||||
window.routeList=[];
|
||||
|
||||
router.beforeEach(function(transition){
|
||||
console.log(11111);
|
||||
console.log('before---------------');
|
||||
//可以通过在路由中的自定义字段来验证用户是否需要登陆
|
||||
// if(transition.to.auth){
|
||||
// console.log('通过配置路由中自定义的字段验证是否需要登陆');
|
||||
// }
|
||||
|
||||
// //如果是中止，这里可以判断用户登录
|
||||
// //if(transition.to.path === '/forbidden'){
|
||||
if(transition.to.name == 'forbidden'){
|
||||
router.app.authenticating = true
|
||||
setTimeout(function(){
|
||||
router.app.authenticating = false
|
||||
alert('此路由在全局中设置为中止');
|
||||
transition.abort();
|
||||
},1500);
|
||||
}
|
||||
|
||||
if(routeList.length > 1 && transition.to.name==routeList[routeList.length-2]['name']){
|
||||
router.app.effect='back';
|
||||
routeList.splice(routeList.length-1,1);
|
||||
console.log(routeList);
|
||||
} else {
|
||||
router.app.effect='fade';
|
||||
routeList.push({
|
||||
name : transition.to.name,
|
||||
path : transition.to.path,
|
||||
query : transition.to.query,
|
||||
params : transition.to.params,
|
||||
timer: +new Date
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(function(){
|
||||
transition.next();
|
||||
},00);
|
||||
});
|
||||
|
||||
//可以记录访问路径
|
||||
router.afterEach(function(transition){
|
||||
console.log('-----------------after');
|
||||
for (var i = 0; i < routeList.length; i++) {
|
||||
console.log(routeList[i].name);
|
||||
};
|
||||
});
|
||||
}
|
||||
27
src/views/about.vue
Normal file
27
src/views/about.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
|
||||
<div class="about">
|
||||
<h2>you're in {{title}} page!</h2>
|
||||
<p>{{content}}</p>
|
||||
<p>
|
||||
<img :src="imageSrc">
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
require('../css/testInAbout.css');
|
||||
module.exports = {
|
||||
data:function(){
|
||||
return {
|
||||
imageSrc:require('../images/logo.png'),
|
||||
content:'aboutMessage',
|
||||
title:'about'
|
||||
}
|
||||
},
|
||||
route:{
|
||||
activate:function(transition){
|
||||
transition.next();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
21
src/views/home.vue
Normal file
21
src/views/home.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
Welcome to Home router page!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data:function(){
|
||||
return {
|
||||
msg:'aboutMessage',
|
||||
title:'home'
|
||||
}
|
||||
},
|
||||
route:{
|
||||
activate:function(transition){
|
||||
transition.next();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
106
src/views/index.vue
Normal file
106
src/views/index.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<style>
|
||||
.index{
|
||||
text-align: center;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.index h2{
|
||||
font-size: 28px;;
|
||||
}
|
||||
.router-link{
|
||||
color: cornflowerblue;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="index">
|
||||
<h2>vue-router 介绍:</h2>
|
||||
<a class="router-link" href="http://router.vuejs.org/zh-cn/" target="_blank">点击这里</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var lifecycle = []; //为了描述生命周期， 在 canActivate 阶段 还没有 this.lifecycle
|
||||
|
||||
module.exports = {
|
||||
//props: ['父组建传的值'],
|
||||
data:function(){
|
||||
lifecycle.push("data");
|
||||
return {
|
||||
msg: '各个阶段，可以查看控制台输出，message from my-views',
|
||||
title:'my_views',
|
||||
lifecycle:lifecycle
|
||||
}
|
||||
},
|
||||
route:{
|
||||
//waitForData: true, //数据加载完毕后再切换试图，也就是 点击之后先没反应，然后数据加载完，再出发过渡效果
|
||||
canActivate:function(transition){
|
||||
//canActivate阶段，可以做一些用户验证的事情
|
||||
lifecycle.push("route.canActivate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-activate.html'>在验证阶段，当一个组件将要被切入的时候被调用。</a>");
|
||||
return true;
|
||||
},
|
||||
activate:function(transition){
|
||||
//console.log('active');
|
||||
this.lifecycle.push("route.activate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据。</a>");
|
||||
// this.$root.$set('header',this.title);
|
||||
|
||||
transition.next();
|
||||
//此方法结束后，api会调用afterActivate 方法
|
||||
//在aftefActivate中 会给组件添加 $loadingRouteData 属性 并设置为true
|
||||
},
|
||||
data: function(transition) {
|
||||
var _this = this;
|
||||
|
||||
this.lifecycle.push("route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据</a>");
|
||||
|
||||
// 说明之前请求过 则不用再请求了
|
||||
if(this.$root.myViewsData){
|
||||
this.$data = this.$root.myViewsData;
|
||||
transition.next();
|
||||
console.log('已经请求过了不再请求数据');
|
||||
return;
|
||||
}
|
||||
|
||||
//将数据同步到根节点
|
||||
this.$root.myViewsData = this.$data;
|
||||
setTimeout(function(){
|
||||
//这里 _this.$loadingRouteData 是 true
|
||||
transition.next({msg:'加载后的数据'});
|
||||
//在调用完transition.next 后，_this.$loadingRouteData 为 false
|
||||
}.bind(this),4000);
|
||||
},
|
||||
canDeactivate:function(transition){
|
||||
this.lifecycle.push("route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-deactivate.html'>在验证阶段，当一个组件将要被切出的时候被调用。</a>");
|
||||
transition.next();
|
||||
},
|
||||
deactivate: function (transition) {
|
||||
this.lifecycle.push("route.deactivate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/deactivate.html'>在激活阶段，当一个组件将要被禁用和移除之时被调用。</a>");
|
||||
this.lifecycle = [];
|
||||
transition.next();
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
this.lifecycle.push("created <a href='http://cn.vuejs.org/api/options.html#created'>在实例被创建的时候同步调用。在这个阶段，实例已经完成了包含以下内容的准备工作：数据观察，计算属性，方法，以及事件回调。但 DOM 编译还没开始，vm.$el 此时尚不可用。</a>");
|
||||
},
|
||||
beforeCompile:function(){
|
||||
this.lifecycle.push("beforeCompile <a href='http://cn.vuejs.org/api/options.html#beforeCompile'>在编译开始之前调用。</a>");
|
||||
},
|
||||
compiled:function(){
|
||||
this.lifecycle.push("compiled <a href='http://cn.vuejs.org/api/options.html#compiled'>在编译完成后调用。在这个阶段，所有的指令都已经完成绑定，数据变化会触发DOM更新。但此时尚不能保证 $el 已经被插入到DOM中。</a>");
|
||||
},
|
||||
ready:function(){
|
||||
this.lifecycle.push("ready <a href='http://cn.vuejs.org/api/options.html#ready'>在编译完成后并且 $el 第一次插入文档时调用，也就是刚好在第一次 attached 钩子之后调用。注意只有通过指令或 Vue 实例方法，比如 $appendTo() 插入才会触发 ready。</a>");
|
||||
},
|
||||
attached:function(){
|
||||
this.lifecycle.push("attached <a href='http://cn.vuejs.org/api/options.html#attached'>当 vm.$el 被一个指令或是 vm 实例方法（例如$appendTo()）插入到DOM里的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>");
|
||||
},
|
||||
detached:function(){
|
||||
this.lifecycle.push("detached <a href='http://cn.vuejs.org/api/options.html#detached'>当 vm.$el 被一个指令或是 vm 实例方法从 DOM 里移除的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>");
|
||||
},
|
||||
beforeDestroy:function(){
|
||||
this.lifecycle.push("beforeDestroy <a href='http://cn.vuejs.org/api/options.html#beforeDestroy'>在一个 Vue 实例被销毁之前调用。这个时候，实例的绑定和指令仍工作正常。</a>");
|
||||
},
|
||||
destroyed:function(){
|
||||
this.lifecycle.push("destroyed <a href='http://cn.vuejs.org/api/options.html#destroyed'>在一个 Vue 实例被销毁之后调用。当这个钩子被调用时，该 Vue 实例的所有指令都已经被解除绑定，所有子实例也已经被销毁。注意如果有一个离开过渡效果，destroyed 会在过渡效果结束之后才被调用。</a>");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
98
src/views/my_views.vue
Normal file
98
src/views/my_views.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<style>
|
||||
.my-views h2 {
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<h2>啥玩意儿？my_views.vue</h2>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var lifecycle = []; //为了描述生命周期， 在 canActivate 阶段 还没有 this.lifecycle
|
||||
|
||||
module.exports = {
|
||||
//props: ['父组建传的值'],
|
||||
data:function(){
|
||||
lifecycle.push("data");
|
||||
return {
|
||||
msg: '各个阶段，可以查看控制台输出，message from my-views',
|
||||
title:'my_views',
|
||||
lifecycle:lifecycle
|
||||
}
|
||||
},
|
||||
//这里才是route的生存周期
|
||||
route:{
|
||||
//waitForData: true, //数据加载完毕后再切换试图，也就是 点击之后先没反应，然后数据加载完，再出发过渡效果
|
||||
canActivate:function(transition){
|
||||
//canActivate阶段，可以做一些用户验证的事情
|
||||
lifecycle.push("route.canActivate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-activate.html'>在验证阶段，当一个组件将要被切入的时候被调用。</a>");
|
||||
return true;
|
||||
},
|
||||
activate:function(transition){
|
||||
//console.log('active');
|
||||
this.lifecycle.push("route.activate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据。</a>");
|
||||
// this.$root.$set('header',this.title);
|
||||
|
||||
transition.next();
|
||||
//此方法结束后，api会调用afterActivate 方法
|
||||
//在aftefActivate中 会给组件添加 $loadingRouteData 属性 并设置为true
|
||||
},
|
||||
data: function(transition) {
|
||||
var _this = this;
|
||||
|
||||
this.lifecycle.push("route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据</a>");
|
||||
|
||||
// 说明之前请求过 则不用再请求了
|
||||
if(this.$root.myViewsData){
|
||||
this.$data = this.$root.myViewsData;
|
||||
transition.next();
|
||||
console.log('已经请求过了不再请求数据');
|
||||
return;
|
||||
}
|
||||
|
||||
//将数据同步到根节点
|
||||
this.$root.myViewsData = this.$data;
|
||||
setTimeout(function(){
|
||||
//这里 _this.$loadingRouteData 是 true
|
||||
transition.next({msg:'加载后的数据'});
|
||||
//在调用完transition.next 后，_this.$loadingRouteData 为 false
|
||||
}.bind(this),4000);
|
||||
},
|
||||
canDeactivate:function(transition){
|
||||
this.lifecycle.push("route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-deactivate.html'>在验证阶段，当一个组件将要被切出的时候被调用。</a>");
|
||||
transition.next();
|
||||
},
|
||||
deactivate: function (transition) {
|
||||
this.lifecycle.push("route.deactivate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/deactivate.html'>在激活阶段，当一个组件将要被禁用和移除之时被调用。</a>");
|
||||
this.lifecycle = [];
|
||||
transition.next();
|
||||
}
|
||||
},
|
||||
|
||||
created:function(){
|
||||
this.lifecycle.push("created <a href='http://cn.vuejs.org/api/options.html#created'>在实例被创建的时候同步调用。在这个阶段，实例已经完成了包含以下内容的准备工作：数据观察，计算属性，方法，以及事件回调。但 DOM 编译还没开始，vm.$el 此时尚不可用。</a>");
|
||||
},
|
||||
beforeCompile:function(){
|
||||
this.lifecycle.push("beforeCompile <a href='http://cn.vuejs.org/api/options.html#beforeCompile'>在编译开始之前调用。</a>");
|
||||
},
|
||||
compiled:function(){
|
||||
this.lifecycle.push("compiled <a href='http://cn.vuejs.org/api/options.html#compiled'>在编译完成后调用。在这个阶段，所有的指令都已经完成绑定，数据变化会触发DOM更新。但此时尚不能保证 $el 已经被插入到DOM中。</a>");
|
||||
},
|
||||
ready:function(){
|
||||
this.lifecycle.push("ready <a href='http://cn.vuejs.org/api/options.html#ready'>在编译完成后并且 $el 第一次插入文档时调用，也就是刚好在第一次 attached 钩子之后调用。注意只有通过指令或 Vue 实例方法，比如 $appendTo() 插入才会触发 ready。</a>");
|
||||
},
|
||||
attached:function(){
|
||||
this.lifecycle.push("attached <a href='http://cn.vuejs.org/api/options.html#attached'>当 vm.$el 被一个指令或是 vm 实例方法（例如$appendTo()）插入到DOM里的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>");
|
||||
},
|
||||
detached:function(){
|
||||
this.lifecycle.push("detached <a href='http://cn.vuejs.org/api/options.html#detached'>当 vm.$el 被一个指令或是 vm 实例方法从 DOM 里移除的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>");
|
||||
},
|
||||
beforeDestroy:function(){
|
||||
this.lifecycle.push("beforeDestroy <a href='http://cn.vuejs.org/api/options.html#beforeDestroy'>在一个 Vue 实例被销毁之前调用。这个时候，实例的绑定和指令仍工作正常。</a>");
|
||||
},
|
||||
destroyed:function(){
|
||||
this.lifecycle.push("destroyed <a href='http://cn.vuejs.org/api/options.html#destroyed'>在一个 Vue 实例被销毁之后调用。当这个钩子被调用时，该 Vue 实例的所有指令都已经被解除绑定，所有子实例也已经被销毁。注意如果有一个离开过渡效果，destroyed 会在过渡效果结束之后才被调用。</a>");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
38
src/views/news.vue
Normal file
38
src/views/news.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="news">
|
||||
<h2>
|
||||
教你使用component！
|
||||
</h2>
|
||||
<uiselect :items.sync="items">
|
||||
<h3 slot="title">下面这个来自component</h3>
|
||||
</uiselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data:function(){
|
||||
return {
|
||||
items:[{text:'男',hover:false},{text:'女',hover:false}],
|
||||
title:'select模拟'
|
||||
}
|
||||
},
|
||||
components:{
|
||||
uiselect:require('../components/select.vue')
|
||||
},
|
||||
route:{
|
||||
activate:function(transition){
|
||||
transition.next();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.news{
|
||||
text-align: center;
|
||||
}
|
||||
.news h2{
|
||||
font-size: 28px;;
|
||||
}
|
||||
</style>
|
||||
17
src/views/search.vue
Normal file
17
src/views/search.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<style>
|
||||
.search h2{
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-top: 15px;;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="search">
|
||||
<h2>
|
||||
Welcome to search router page!
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
59
vueComponent.sublime-snippet
Normal file
59
vueComponent.sublime-snippet
Normal file
@ -0,0 +1,59 @@
|
||||
<snippet>
|
||||
<content><![CDATA[
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
//props: ['父组建传的值'],
|
||||
data:function(){
|
||||
console.log('1-1这里是组建的data,在route的 canActivate之后调用');
|
||||
return {
|
||||
msg:'这里返回数据'
|
||||
}
|
||||
},
|
||||
//这里才是route的生存周期
|
||||
route:{
|
||||
//waitForData: true, //数据加载完毕后再切换试图，也就是 点击之后先没反应，然后数据加载完，再出发过渡效果
|
||||
canActivate:function(transition){
|
||||
//console.log('canActivate阶段，可以做一些用户验证的事情');
|
||||
//return authenticationService.isLoggedIn()
|
||||
console.log('1-canActivate');
|
||||
//debugger;
|
||||
return true;
|
||||
},
|
||||
activate:function(transition){
|
||||
//console.log('active');
|
||||
console.log('2-activate');
|
||||
transition.next();
|
||||
//此方法结束后，api会调用afterActivate 方法
|
||||
//在aftefActivate中 会给组件添加 $loadingRouteData 属性 并设置为true
|
||||
},
|
||||
data: function(transition) {
|
||||
var _this = this;
|
||||
console.log('3-data--在 data 中获取数据比在 activate 中更加合理 见http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html');
|
||||
|
||||
setTimeout(function(){
|
||||
//在 transition.next({a:1}) 之前
|
||||
//这里 _this.$loadingRouteData 是 true 因为此时获取
|
||||
transition.next({a:1}); //这里必须要设置一个值 不能是 transition.next();
|
||||
//这里 _this.$loadingRouteData 就是false了。 vue-router.js :2250 左右
|
||||
},3000);
|
||||
},
|
||||
deactivate: function (transition) {
|
||||
console.log('4');
|
||||
console.log('Bar 销毁!')
|
||||
transition.next()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
]]></content>
|
||||
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
|
||||
<tabTrigger>vueComponent</tabTrigger>
|
||||
</snippet>
|
||||
135
webpack.config.js
Normal file
135
webpack.config.js
Normal file
@ -0,0 +1,135 @@
|
||||
//先清空 n-build 文件夹下的文件
|
||||
var fs = require('fs'),buildPath='./build/';
|
||||
var folder_exists = fs.existsSync(buildPath);
|
||||
if(folder_exists == true)
|
||||
{
|
||||
var dirList = fs.readdirSync(buildPath);
|
||||
dirList.forEach(function(fileName)
|
||||
{
|
||||
fs.unlinkSync(buildPath + fileName);
|
||||
});
|
||||
console.log("clearing " + buildPath);
|
||||
};
|
||||
|
||||
//readfile
|
||||
//先把index.html里面关于style和js的hash值都删除掉，避免在使用 npm run dev 的时候，路径还是压缩后的路劲
|
||||
fs.readFile("index.html",'utf-8',function(err,data){
|
||||
if(err){
|
||||
console.log("error");
|
||||
}else{
|
||||
//将index.html里面的hash值清除掉
|
||||
var devhtml = data.replace(/((?:href|src)="[^"]+\.)(\w{20}\.)(js|css)/g, '$1$3');
|
||||
fs.writeFileSync('index.html', devhtml);
|
||||
}
|
||||
});
|
||||
|
||||
var webpack = require('webpack');
|
||||
|
||||
//var vue = require("vue-loader");
|
||||
|
||||
|
||||
//混淆压缩
|
||||
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
|
||||
|
||||
//检测重用模块
|
||||
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
|
||||
|
||||
//独立样式文件
|
||||
var ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
|
||||
|
||||
|
||||
// 在命令行 输入 “PRODUCTION=1 webpack --progress” 就会打包压缩，并且注入md5戳 到 index.html里面
|
||||
var production = process.env.PRODUCTION;
|
||||
|
||||
var plugins = [
|
||||
//会将所有的样式文件打包成一个单独的style.css
|
||||
new ExtractTextPlugin( production ? "style.[hash].css" : "style.css" , {
|
||||
disable: false//,
|
||||
//allChunks: true //所有独立样式打包成一个css文件
|
||||
}),
|
||||
//new ExtractTextPlugin("[name].css" )
|
||||
//自动分析重用的模块并且打包成单独的文件
|
||||
new CommonsChunkPlugin(production ? "vendor.[hash].js" : "vendor.js" ),
|
||||
function(){
|
||||
return this.plugin('done', function(stats) {
|
||||
var content;
|
||||
//这里可以拿到hash值 参考：http://webpack.github.io/docs/long-term-caching.html
|
||||
content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);
|
||||
console.log('版本是：'+JSON.stringify(stats.toJson().hash));
|
||||
//return fs.writeFileSync('build/assets.json', content);
|
||||
});
|
||||
}
|
||||
];
|
||||
|
||||
//发布编译时，压缩，版本控制
|
||||
if (process.env.PRODUCTION) {
|
||||
//压缩
|
||||
plugins.push(new webpack.optimize.UglifyJsPlugin({compress: {warnings: false } }));
|
||||
}
|
||||
|
||||
/*
|
||||
版本控制
|
||||
package.json中的
|
||||
"html-webpack-plugin": "^1.6.2",
|
||||
模块是把生成的带有md5戳的文件，插入到index.html中。
|
||||
通过index.tpl模板，生成 index.html
|
||||
*/
|
||||
var HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
//HtmlWebpackPlugin文档 https://www.npmjs.com/package/html-webpack-plugin
|
||||
//https://github.com/ampedandwired/html-webpack-plugin/issues/52
|
||||
plugins.push( new HtmlWebpackPlugin({
|
||||
filename:'../index.html',//会生成index.html在根目录下,并注入脚本
|
||||
template:'index.tpl',
|
||||
inject:true //此参数必须加上，不加不注入
|
||||
}));
|
||||
|
||||
|
||||
module.exports = {
|
||||
entry: ["./src/app.js"],
|
||||
output: {
|
||||
path: "./build",
|
||||
/*
|
||||
publicPath路径就是你发布之后的路径，
|
||||
比如你想发布到你站点的/util/vue/build 目录下, 那么设置
|
||||
publicPath: "/util/vue/build/",
|
||||
此字段配置如果不正确，发布后资源定位不对，比如：css里面的精灵图路径错误
|
||||
*/
|
||||
publicPath: "/build/",
|
||||
filename: production ? "build.[hash].js" : "build.js"//"build.[hash].js"//[hash]MD5戳 解决html的资源的定位可以使用 webpack提供的HtmlWebpackPlugin插件来解决这个问题 见：http://segmentfault.com/a/1190000003499526 资源路径切换
|
||||
},
|
||||
module: {
|
||||
preLoaders:[
|
||||
// {
|
||||
// //代码检查
|
||||
// test:/\.js$/,exclude:/node_modules/,loader:'jshint-loader'
|
||||
// }
|
||||
],
|
||||
loaders: [
|
||||
// 加载vue组件，并将css全部整合到一个style.css里面
|
||||
// 但是使用这种方式后 原先可以在vue组件中 在style里面加入 scoped 就不能用了,
|
||||
// 好处是使用了cssnext，那么样式按照标准的来写就行了，会自动生成兼容代码 http://cssnext.io/playground/
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!cssnext-loader")},
|
||||
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
|
||||
{test: /\.woff$/, loader: "url?limit=10000&minetype=application/font-woff"},
|
||||
{test: /\.ttf$/, loader: "file"},
|
||||
{test: /\.eot$/, loader: "file"},
|
||||
{test: /\.svg$/, loader: "file"}
|
||||
]
|
||||
},
|
||||
vue:{
|
||||
css:ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!cssnext-loader")
|
||||
},
|
||||
plugins : plugins,
|
||||
devtool: 'source-map'//,
|
||||
// resolve: {
|
||||
// // 现在可以写 require('file') 代替 require('file.coffee')
|
||||
// extensions: ['', '.js', '.json', '.coffee','vue']
|
||||
// }
|
||||
};
|
||||
|
||||
|
||||
144
约定.md
Normal file
144
约定.md
Normal file
@ -0,0 +1,144 @@
|
||||
|
||||
|
||||
#### 使用具名路径
|
||||
|
||||
```
|
||||
<a v-link="{ name: 'myviews', params: { viewId: 123 }}">User</a>
|
||||
```
|
||||
|
||||
#### 组件传值的时候单个单词小写，如果有多个单词用"-"连接 [API说明](http://rc.vuejs.org/guide/components.html#camelCase_vs-_kebab-case)
|
||||
|
||||
```
|
||||
<uiradio :items.sync="mutilCheckitems" :mutil-check.sync="mutilCheck">
|
||||
|
||||
```
|
||||
然后在组件props中用驼峰的方式访问['mutilCheck']。
|
||||
|
||||
#### 组件传值得时候尽量不要使用表达式，可以在computed中定义
|
||||
比如：
|
||||
|
||||
```
|
||||
<uiradio :items.sync="singleCheckitems" :mutil-check.sync="!mutilCheck">
|
||||
```
|
||||
修改为
|
||||
```
|
||||
<uiradio :items.sync="singleCheckitems" :mutil-check.sync="singleCheck"></uiradio>
|
||||
```
|
||||
然后定义computed
|
||||
|
||||
```
|
||||
...
|
||||
computed:{
|
||||
singleCheck:function(){
|
||||
return false;
|
||||
}
|
||||
},
|
||||
...
|
||||
```
|
||||
|
||||
#### 在绑定属性的时候
|
||||
```
|
||||
<div class="tab-panel" v-show="show" transition="transiton">
|
||||
<slot name="tab-panel"></slot>
|
||||
</div>
|
||||
此处的 transition="transiton" 代表的是 transition 这个类名
|
||||
```
|
||||
而如果前面加个`:`则代表的是动态属性，: 是 v-bind的简写 参考 [Vue1.0.0绑定语法参考](https://github.com/vuejs/vue/issues/1325)
|
||||
|
||||
```
|
||||
<div class="tab-panel" v-show="show" :transition="transiton">
|
||||
```
|
||||
|
||||
#### 绑定属性用双引号
|
||||
|
||||
|
||||
#### 关于 vueComponent.sublime-snippet 文件
|
||||
```
|
||||
功能：sublime中编写vue组件的片段提示
|
||||
使用：
|
||||
sublime中 菜单栏 - >Preferences - > 浏览插件
|
||||
将文件复制到 User目录下
|
||||
项目中新建 `组件名字.vue` 文件
|
||||
ctrl+shift+p 输入 vuecomponent 回车
|
||||
```
|
||||
|
||||
|
||||
#### 在vue组件 template 中不能出现 `<` 字符, 如果有此字符，那么在使用webpack.optimize.UglifyJsPlugin压缩的时候，编译会报错
|
||||
|
||||
#### DOM属性定义用""包起来,否则不正确的字符可能会导致在 使用webpack.optimize.UglifyJsPlugin压缩的时候,控制台卡死。
|
||||
|
||||
#### vue文件的，template模版中，注释的html里面如果有img标签，相关资源也会被打包。
|
||||
|
||||
```
|
||||
<!--
|
||||
...
|
||||
<img src="./xx.jpg">
|
||||
...
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
#### 在data属性里面不要定义以下划线开头的字段。
|
||||
|
||||
```
|
||||
data:{
|
||||
_k:'v' // this._k 获取不到
|
||||
}
|
||||
```
|
||||
|
||||
#### vue-router路由配置的时候，不要写下划线
|
||||
|
||||
```
|
||||
'/loan':{
|
||||
name:'loan',
|
||||
component: require('./views/loan.vue')
|
||||
},
|
||||
'/loan_old':{
|
||||
name:'xxx',
|
||||
component: require('./views/loan_old.vue')
|
||||
},
|
||||
下面的会覆盖上面的，原来本应该跳转到loan的可能现在都跳到了loan_old
|
||||
```
|
||||
|
||||
#### 关于版本控制
|
||||
参考：
|
||||
[http://webpack.github.io/docs/long-term-caching.html](http://webpack.github.io/docs/long-term-caching.html)
|
||||
|
||||
[https://github.com/teambition/coffee-webpack-starter/blob/92082085d96f6c5003711e042da38bfa140d8dd6/webpack.min.coffee#L21](https://github.com/teambition/coffee-webpack-starter/blob/92082085d96f6c5003711e042da38bfa140d8dd6/webpack.min.coffee#L21)
|
||||
|
||||
|
||||
```
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.[chunkhash:8].js'),
|
||||
new webpack.optimize.UglifyJsPlugin({sourceMap: false}),
|
||||
new ExtractTextPlugin("style.[chunkhash:8].css"),
|
||||
function() {
|
||||
return this.plugin('done', function(stats) {
|
||||
var content;
|
||||
content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);
|
||||
return fs.writeFileSync('build/assets.json', content);
|
||||
});
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 禁止在层上滑动(比如：背景层，不想让用户滚动)
|
||||
```
|
||||
@touchstart.stop.prevent
|
||||
```
|
||||
|
||||
#### 如果要阻止默认事件，一定要写在前面，否则会影响其他事件绑定
|
||||
```
|
||||
@touchmove.stop.prevent @click.stop="show=false"
|
||||
```
|
||||
|
||||
#### 尽量少用<template>,用多了，感觉渲染的会慢很多。
|
||||
```
|
||||
<template v-if="flag">
|
||||
bla bla bla...
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
#### 压缩，发布生产的时候，设置 Vue.config.debug = false; 去除注释，因为某些安卓机型里面，可能会出现莫名奇妙的问题。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user