mirror of
https://github.com/xsf0105/vue3-h5-template.git
synced 2025-04-05 19:41:57 +08:00
vue1 to vue2
This commit is contained in:
xsf
parent
aa270ce8d8
commit
d655c30387
5
.babelrc
Normal file
5
.babelrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"presets": ["es2015", "stage-2"],
|
||||
"plugins": ["transform-runtime"],
|
||||
"comments": false
|
||||
}
|
||||
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log
|
||||
11
.idea/Vue2-SPA2.iml
generated
Normal file
11
.idea/Vue2-SPA2.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>
|
||||
6
.idea/jsLibraryMappings.xml
generated
Normal file
6
.idea/jsLibraryMappings.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<includedPredefinedLibrary name="ECMAScript 6" />
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptSettings">
|
||||
<option name="languageLevel" value="ES6" />
|
||||
</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/Vue2-SPA2.iml" filepath="$PROJECT_DIR$/.idea/Vue2-SPA2.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>
|
||||
4
.idea/watcherTasks.xml
generated
Normal file
4
.idea/watcherTasks.xml
generated
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectTasksOptions" suppressed-tasks="Babel" />
|
||||
</project>
|
||||
596
.idea/workspace.xml
generated
Normal file
596
.idea/workspace.xml
generated
Normal file
@ -0,0 +1,596 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="6c3e536c-9625-47f2-a758-491a8f6d2111" name="Default" comment="" />
|
||||
<ignored path="Vue2-SPA2.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="CreatePatchCommitExecutor">
|
||||
<option name="PATCH_PATH" value="" />
|
||||
</component>
|
||||
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
|
||||
<component name="FavoritesManager">
|
||||
<favorites_list name="Vue2-SPA2" />
|
||||
</component>
|
||||
<component name="FileEditorManager">
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<file leaf-file-name="App.vue" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/src/App.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="399">
|
||||
<caret line="21" column="19" lean-forward="true" selection-start-line="21" selection-start-column="19" selection-end-line="21" selection-end-column="19" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="news.vue" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/news.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="171">
|
||||
<caret line="9" column="0" lean-forward="true" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="main.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/main.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="7" lean-forward="false" selection-start-line="0" selection-start-column="7" selection-end-line="0" selection-end-column="7" />
|
||||
<folding>
|
||||
<element signature="e#11#32#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="footer.vue" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/components/footer.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="380">
|
||||
<caret line="22" column="9" lean-forward="true" selection-start-line="22" selection-start-column="9" selection-end-line="22" selection-end-column="9" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="index.vue" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/index.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="646">
|
||||
<caret line="34" column="14" lean-forward="true" selection-start-line="34" selection-start-column="14" selection-end-line="34" selection-end-column="14" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
</leaf>
|
||||
</component>
|
||||
<component name="FindInProjectRecents">
|
||||
<findStrings>
|
||||
<find>what the fuck</find>
|
||||
</findStrings>
|
||||
</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/json/test.json" />
|
||||
<option value="$PROJECT_DIR$/README.md" />
|
||||
<option value="$PROJECT_DIR$/src/router/router.js.vue" />
|
||||
<option value="$PROJECT_DIR$/src/router/router.js" />
|
||||
<option value="$PROJECT_DIR$/src/components/Hello.vue" />
|
||||
<option value="$PROJECT_DIR$/src/main.js" />
|
||||
<option value="$PROJECT_DIR$/src/pages/footer.vue" />
|
||||
<option value="$PROJECT_DIR$/src/common.css" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
<option value="$PROJECT_DIR$/src/components/header.vue" />
|
||||
<option value="$PROJECT_DIR$/src/router/index.js" />
|
||||
<option value="$PROJECT_DIR$/src/components/footer.vue" />
|
||||
<option value="$PROJECT_DIR$/src/App.vue" />
|
||||
<option value="$PROJECT_DIR$/src/pages/otherPages.vue" />
|
||||
<option value="$PROJECT_DIR$/src/pages/index.vue" />
|
||||
<option value="$PROJECT_DIR$/src/pages/news.vue" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
|
||||
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER">
|
||||
<package-json value="$PROJECT_DIR$/package.json" />
|
||||
</component>
|
||||
<component name="JsFlowSettings">
|
||||
<service-enabled>false</service-enabled>
|
||||
<exe-path />
|
||||
<annotation-enable>false</annotation-enable>
|
||||
<other-services-enabled>false</other-services-enabled>
|
||||
</component>
|
||||
<component name="JsGulpfileManager">
|
||||
<detection-done>true</detection-done>
|
||||
<sorting>DEFINITION_ORDER</sorting>
|
||||
</component>
|
||||
<component name="ProjectFrameBounds">
|
||||
<option name="x" value="284" />
|
||||
<option name="y" value="34" />
|
||||
<option name="width" value="1499" />
|
||||
<option name="height" value="925" />
|
||||
</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="Vue2-SPA2" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="Vue2-SPA2" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
</PATH>
|
||||
<PATH>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="Vue2-SPA2" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="Vue2-SPA2" />
|
||||
<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>
|
||||
<PATH>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="Vue2-SPA2" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="Vue2-SPA2" />
|
||||
<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_ELEMENT>
|
||||
<option name="myItemId" value="pages" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
</PATH>
|
||||
</subPane>
|
||||
</pane>
|
||||
</panes>
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||
<property name="HbShouldOpenHtmlAsHb" value="" />
|
||||
<property name="settings.editor.selected.configurable" value="preferences.general" />
|
||||
<property name="JavaScriptPreferStrict" value="false" />
|
||||
<property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
|
||||
<property name="js-jscs-nodeInterpreter" value="D:\Program Files\nodejs\node.exe" />
|
||||
<property name="editor.config.accepted" value="true" />
|
||||
<property name="nodejs_interpreter_path" value="D:/Program Files/nodejs/node" />
|
||||
<property name="js.eslint.eslintPackage" value="" />
|
||||
</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
<recent name="C:\Users\Administrator\Desktop\Vue2-SPA2\src\components" />
|
||||
</key>
|
||||
<key name="MoveFile.RECENT_KEYS">
|
||||
<recent name="C:\Users\Administrator\Desktop\Vue2-SPA2\src\css" />
|
||||
<recent name="C:\Users\Administrator\Desktop\Vue2-SPA2\src\components" />
|
||||
<recent name="C:\Users\Administrator\Desktop\Vue2-SPA2\src\pages" />
|
||||
</key>
|
||||
</component>
|
||||
<component name="RunManager">
|
||||
<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 value="" />
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="JavaScriptTestRunnerProtractor" factoryName="Protractor">
|
||||
<config-file value="" />
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" path-to-node="project" 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-interpreter>project</node-interpreter>
|
||||
<node-options />
|
||||
<gulpfile />
|
||||
<tasks />
|
||||
<arguments />
|
||||
<envs />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="js.build_tools.npm" factoryName="npm">
|
||||
<command value="run-script" />
|
||||
<scripts />
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="mocha-javascript-test-runner" factoryName="Mocha">
|
||||
<node-interpreter>project</node-interpreter>
|
||||
<node-options />
|
||||
<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>
|
||||
</component>
|
||||
<component name="ShelveChangesManager" show_recycled="false">
|
||||
<option name="remove_strategy" value="false" />
|
||||
</component>
|
||||
<component name="SvnConfiguration">
|
||||
<configuration />
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="6c3e536c-9625-47f2-a758-491a8f6d2111" name="Default" comment="" />
|
||||
<created>1481036131519</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1481036131519</updated>
|
||||
<workItem from="1481036136210" duration="1308000" />
|
||||
<workItem from="1481074149722" duration="6050000" />
|
||||
<workItem from="1481080295306" duration="2328000" />
|
||||
<workItem from="1481087334416" duration="4410000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TimeTrackingManager">
|
||||
<option name="totallyTimeSpent" value="14096000" />
|
||||
</component>
|
||||
<component name="ToolWindowManager">
|
||||
<frame x="284" y="34" width="1499" height="925" extended-state="0" />
|
||||
<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.15947981" 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="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="8" side_tool="false" 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="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.3279099" sideWeight="0.5" order="9" 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="2" 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.3296582" 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="TypeScriptGeneratedFilesManager">
|
||||
<option name="processedProjectFiles" value="true" />
|
||||
</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/pages/otherPages.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="285">
|
||||
<caret line="15" column="0" lean-forward="true" 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$/src/main.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="152">
|
||||
<caret line="10" column="0" lean-forward="true" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
|
||||
<folding>
|
||||
<element signature="n#!!doc" expanded="false" />
|
||||
<element signature="e#11#32#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/App.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="133">
|
||||
<caret line="7" column="8" lean-forward="true" selection-start-line="7" selection-start-column="8" selection-end-line="7" selection-end-column="8" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/index.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="247">
|
||||
<caret line="13" column="32" lean-forward="true" selection-start-line="13" selection-start-column="32" selection-end-line="13" selection-end-column="32" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/router/index.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding>
|
||||
<element signature="n#!!doc" expanded="true" />
|
||||
<element signature="e#15#36#0" expanded="true" />
|
||||
<element signature="e#134#187#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/main.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="304">
|
||||
<caret line="19" column="6" lean-forward="true" selection-start-line="19" selection-start-column="6" selection-end-line="19" selection-end-column="6" />
|
||||
<folding>
|
||||
<element signature="n#!!doc" expanded="false" />
|
||||
<element signature="e#11#32#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/App.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="361">
|
||||
<caret line="19" column="7" lean-forward="true" selection-start-line="19" selection-start-column="7" selection-end-line="19" selection-end-column="7" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/index.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="76">
|
||||
<caret line="4" column="11" lean-forward="true" selection-start-line="4" selection-start-column="11" selection-end-line="4" selection-end-column="11" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/components/Hello.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="133">
|
||||
<caret line="7" column="9" lean-forward="false" selection-start-line="7" selection-start-column="9" selection-end-line="7" selection-end-column="9" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/otherPages.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="228">
|
||||
<caret line="12" column="5" lean-forward="true" selection-start-line="12" selection-start-column="5" selection-end-line="12" selection-end-column="5" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/README.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state split_layout="SPLIT">
|
||||
<first_editor relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/main.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="266">
|
||||
<caret line="16" column="21" lean-forward="false" selection-start-line="16" selection-start-column="21" selection-end-line="16" selection-end-column="21" />
|
||||
<folding>
|
||||
<element signature="n#!!doc" expanded="false" />
|
||||
<element signature="e#11#32#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/App.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="false" 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/components/Hello.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="361">
|
||||
<caret line="19" column="17" lean-forward="false" selection-start-line="19" selection-start-column="17" selection-end-line="19" selection-end-column="17" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/header.vue" />
|
||||
<entry file="file://$PROJECT_DIR$/src/json/test.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1653">
|
||||
<caret line="87" column="1" lean-forward="false" selection-start-line="87" selection-start-column="1" selection-end-line="87" selection-end-column="1" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/README.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state split_layout="SPLIT">
|
||||
<first_editor relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="false" 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="text-editor">
|
||||
<state relative-caret-position="95">
|
||||
<caret line="5" column="0" lean-forward="true" selection-start-line="5" selection-start-column="0" selection-end-line="5" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/components/Hello.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="133">
|
||||
<caret line="7" column="25" lean-forward="true" selection-start-line="7" selection-start-column="25" selection-end-line="7" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/css/common.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="-336">
|
||||
<caret line="11" column="40" lean-forward="false" selection-start-line="11" selection-start-column="40" selection-end-line="11" selection-end-column="40" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="190">
|
||||
<caret line="10" column="55" lean-forward="false" selection-start-line="10" selection-start-column="55" selection-end-line="10" selection-end-column="55" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/test.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="133">
|
||||
<caret line="7" column="0" lean-forward="false" selection-start-line="7" selection-start-column="0" selection-end-line="11" selection-end-column="8" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/components/header.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="342">
|
||||
<caret line="18" column="5" lean-forward="true" selection-start-line="18" selection-start-column="5" selection-end-line="18" selection-end-column="5" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/otherPages.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="95">
|
||||
<caret line="5" column="0" lean-forward="true" selection-start-line="5" selection-start-column="0" selection-end-line="5" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/router/index.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="323">
|
||||
<caret line="17" column="21" lean-forward="false" selection-start-line="17" selection-start-column="21" selection-end-line="17" selection-end-column="21" />
|
||||
<folding>
|
||||
<element signature="n#!!doc" expanded="true" />
|
||||
<element signature="e#15#36#0" expanded="true" />
|
||||
<element signature="e#134#187#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/index.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="646">
|
||||
<caret line="34" column="14" lean-forward="true" selection-start-line="34" selection-start-column="14" selection-end-line="34" selection-end-column="14" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/components/footer.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="380">
|
||||
<caret line="22" column="9" lean-forward="true" selection-start-line="22" selection-start-column="9" selection-end-line="22" selection-end-column="9" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/main.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="7" lean-forward="false" selection-start-line="0" selection-start-column="7" selection-end-line="0" selection-end-column="7" />
|
||||
<folding>
|
||||
<element signature="e#11#32#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/pages/news.vue">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="171">
|
||||
<caret line="9" column="0" lean-forward="true" selection-start-line="9" selection-start-column="0" selection-end-line="9" 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 relative-caret-position="399">
|
||||
<caret line="21" column="19" lean-forward="true" selection-start-line="21" selection-start-column="19" selection-end-line="21" selection-end-column="19" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</component>
|
||||
</project>
|
||||
197
README.md
Normal file
197
README.md
Normal file
@ -0,0 +1,197 @@
|
||||
# Vue2-SPA
|
||||
|
||||
> A Vue.js project width axios/vue-router/webpack
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Lifecycle
|
||||
|
||||
|
||||
``` bash
|
||||
<template>
|
||||
<h2>lifecycle</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>
|
||||
|
||||
```
|
||||
|
||||
|
||||
## Router
|
||||
|
||||
HTML
|
||||
``` bash
|
||||
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
<template>
|
||||
<!-- 使用 router-link 组件来导航. -->
|
||||
<!-- 通过传入 `to` 属性指定链接. -->
|
||||
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
|
||||
<p>
|
||||
<router-link to="/foo">Go to Foo</router-link>
|
||||
<router-link to="/bar">Go to Bar</router-link>
|
||||
</p>
|
||||
<!-- 路由出口 -->
|
||||
<!-- 路由匹配到的组件将渲染在这里 -->
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
or
|
||||
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/vue-router"></script>
|
||||
|
||||
<div id="app">
|
||||
<p>
|
||||
<router-link to="/foo">Go to Foo</router-link>
|
||||
<router-link to="/bar">Go to Bar</router-link>
|
||||
</p>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
```
|
||||
|
||||
JavaScript
|
||||
``` bash
|
||||
|
||||
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 vue.use(vuerouter)
|
||||
|
||||
// 1. 定义（路由）组件。
|
||||
// 可以从其他文件 import 进来
|
||||
const Foo = { template: '<div>foo</div>' }
|
||||
const Bar = { template: '<div>bar</div>' }
|
||||
|
||||
// 2. 定义路由
|
||||
// 每个路由应该映射一个组件。 其中"component" 可以是
|
||||
// 通过 Vue.extend() 创建的组件构造器，
|
||||
// 或者，只是一个组件配置对象。
|
||||
// 我们晚点再讨论嵌套路由。
|
||||
const routes = [
|
||||
{ path: '/foo', component: Foo },
|
||||
{ path: '/bar', component: Bar }
|
||||
]
|
||||
|
||||
// 3. 创建 router 实例，然后传 `routes` 配置
|
||||
// 你还可以传别的配置参数, 不过先这么简单着吧。
|
||||
const router = new VueRouter({
|
||||
routes // （缩写）相当于 routes: routes
|
||||
})
|
||||
|
||||
// 4. 创建和挂载根实例。
|
||||
// 记得要通过 router 配置参数注入路由，
|
||||
// 从而让整个应用都有路由功能
|
||||
const app = new Vue({
|
||||
router
|
||||
}).$mount('#app')
|
||||
|
||||
// 现在，应用已经启动了！
|
||||
```
|
||||
|
||||
# Reference Articles
|
||||
* [Vue-Router](http://router.vuejs.org/zh-cn/essentials/getting-started.html)
|
||||
* [ECMAScript 6入门](http://es6.ruanyifeng.com/)
|
||||
* [Webpack 入门指迷](https://segmentfault.com/a/1190000002551952)
|
||||
* [webpack使用优化](https://github.com/lcxfs1991/blog/issues/2)
|
||||
* [vue guide](http://vuejs-templates.github.io/webpack/)
|
||||
* [docs for vue-loader](http://vuejs.github.io/vue-loader)
|
||||
36
build/build.js
Normal file
36
build/build.js
Normal file
@ -0,0 +1,36 @@
|
||||
// https://github.com/shelljs/shelljs
|
||||
require('./check-versions')()
|
||||
require('shelljs/global')
|
||||
env.NODE_ENV = 'production'
|
||||
|
||||
var path = require('path')
|
||||
var config = require('../config')
|
||||
var ora = require('ora')
|
||||
var webpack = require('webpack')
|
||||
var webpackConfig = require('./webpack.prod.conf')
|
||||
|
||||
console.log(
|
||||
' Tip:\n' +
|
||||
' Built files are meant to be served over an HTTP server.\n' +
|
||||
' Opening index.html over file:// won\'t work.\n'
|
||||
)
|
||||
|
||||
var spinner = ora('building for production...')
|
||||
spinner.start()
|
||||
|
||||
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
|
||||
rm('-rf', assetsPath)
|
||||
mkdir('-p', assetsPath)
|
||||
cp('-R', 'static/*', assetsPath)
|
||||
|
||||
webpack(webpackConfig, function (err, stats) {
|
||||
spinner.stop()
|
||||
if (err) throw err
|
||||
process.stdout.write(stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false,
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
}) + '\n')
|
||||
})
|
||||
45
build/check-versions.js
Normal file
45
build/check-versions.js
Normal file
@ -0,0 +1,45 @@
|
||||
var semver = require('semver')
|
||||
var chalk = require('chalk')
|
||||
var packageConfig = require('../package.json')
|
||||
var exec = function (cmd) {
|
||||
return require('child_process')
|
||||
.execSync(cmd).toString().trim()
|
||||
}
|
||||
|
||||
var versionRequirements = [
|
||||
{
|
||||
name: 'node',
|
||||
currentVersion: semver.clean(process.version),
|
||||
versionRequirement: packageConfig.engines.node
|
||||
},
|
||||
{
|
||||
name: 'npm',
|
||||
currentVersion: exec('npm --version'),
|
||||
versionRequirement: packageConfig.engines.npm
|
||||
}
|
||||
]
|
||||
|
||||
module.exports = function () {
|
||||
var warnings = []
|
||||
for (var i = 0; i < versionRequirements.length; i++) {
|
||||
var mod = versionRequirements[i]
|
||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
|
||||
warnings.push(mod.name + ': ' +
|
||||
chalk.red(mod.currentVersion) + ' should be ' +
|
||||
chalk.green(mod.versionRequirement)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (warnings.length) {
|
||||
console.log('')
|
||||
console.log(chalk.yellow('To use this template, you must update following to modules:'))
|
||||
console.log()
|
||||
for (var i = 0; i < warnings.length; i++) {
|
||||
var warning = warnings[i]
|
||||
console.log(' ' + warning)
|
||||
}
|
||||
console.log()
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
9
build/dev-client.js
Normal file
9
build/dev-client.js
Normal file
@ -0,0 +1,9 @@
|
||||
/* eslint-disable */
|
||||
require('eventsource-polyfill')
|
||||
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
|
||||
|
||||
hotClient.subscribe(function (event) {
|
||||
if (event.action === 'reload') {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
72
build/dev-server.js
Normal file
72
build/dev-server.js
Normal file
@ -0,0 +1,72 @@
|
||||
require('./check-versions')()
|
||||
var config = require('../config')
|
||||
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
|
||||
var path = require('path')
|
||||
var express = require('express')
|
||||
var webpack = require('webpack')
|
||||
var opn = require('opn')
|
||||
var proxyMiddleware = require('http-proxy-middleware')
|
||||
var webpackConfig = require('./webpack.dev.conf')
|
||||
|
||||
// default port where dev server listens for incoming traffic
|
||||
var port = process.env.PORT || config.dev.port
|
||||
// Define HTTP proxies to your custom API backend
|
||||
// https://github.com/chimurai/http-proxy-middleware
|
||||
var proxyTable = config.dev.proxyTable
|
||||
|
||||
var app = express()
|
||||
var compiler = webpack(webpackConfig)
|
||||
|
||||
var devMiddleware = require('webpack-dev-middleware')(compiler, {
|
||||
publicPath: webpackConfig.output.publicPath,
|
||||
stats: {
|
||||
colors: true,
|
||||
chunks: false
|
||||
}
|
||||
})
|
||||
|
||||
var hotMiddleware = require('webpack-hot-middleware')(compiler)
|
||||
// force page reload when html-webpack-plugin template changes
|
||||
compiler.plugin('compilation', function (compilation) {
|
||||
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
|
||||
hotMiddleware.publish({ action: 'reload' })
|
||||
cb()
|
||||
})
|
||||
})
|
||||
|
||||
// proxy api requests
|
||||
Object.keys(proxyTable).forEach(function (context) {
|
||||
var options = proxyTable[context]
|
||||
if (typeof options === 'string') {
|
||||
options = { target: options }
|
||||
}
|
||||
app.use(proxyMiddleware(context, options))
|
||||
})
|
||||
|
||||
// handle fallback for HTML5 history API
|
||||
app.use(require('connect-history-api-fallback')())
|
||||
|
||||
// serve webpack bundle output
|
||||
app.use(devMiddleware)
|
||||
|
||||
// enable hot-reload and state-preserving
|
||||
// compilation error display
|
||||
app.use(hotMiddleware)
|
||||
|
||||
// serve pure static assets
|
||||
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
|
||||
app.use(staticPath, express.static('./static'))
|
||||
|
||||
module.exports = app.listen(port, function (err) {
|
||||
if (err) {
|
||||
console.log(err)
|
||||
return
|
||||
}
|
||||
var uri = 'http://localhost:' + port
|
||||
console.log('Listening at ' + uri + '\n')
|
||||
|
||||
// when env is testing, don't need open it
|
||||
if (process.env.NODE_ENV !== 'testing') {
|
||||
opn(uri)
|
||||
}
|
||||
})
|
||||
61
build/utils.js
Normal file
61
build/utils.js
Normal file
@ -0,0 +1,61 @@
|
||||
var path = require('path')
|
||||
var config = require('../config')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
|
||||
exports.assetsPath = function (_path) {
|
||||
var assetsSubDirectory = process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsSubDirectory
|
||||
: config.dev.assetsSubDirectory
|
||||
return path.posix.join(assetsSubDirectory, _path)
|
||||
}
|
||||
|
||||
exports.cssLoaders = function (options) {
|
||||
options = options || {}
|
||||
// generate loader string to be used with extract text plugin
|
||||
function generateLoaders (loaders) {
|
||||
var sourceLoader = loaders.map(function (loader) {
|
||||
var extraParamChar
|
||||
if (/\?/.test(loader)) {
|
||||
loader = loader.replace(/\?/, '-loader?')
|
||||
extraParamChar = '&'
|
||||
} else {
|
||||
loader = loader + '-loader'
|
||||
extraParamChar = '?'
|
||||
}
|
||||
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
|
||||
}).join('!')
|
||||
|
||||
// Extract CSS when that option is specified
|
||||
// (which is the case during production build)
|
||||
if (options.extract) {
|
||||
return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
|
||||
} else {
|
||||
return ['vue-style-loader', sourceLoader].join('!')
|
||||
}
|
||||
}
|
||||
|
||||
// http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
|
||||
return {
|
||||
css: generateLoaders(['css']),
|
||||
postcss: generateLoaders(['css']),
|
||||
less: generateLoaders(['css', 'less']),
|
||||
sass: generateLoaders(['css', 'sass?indentedSyntax']),
|
||||
scss: generateLoaders(['css', 'sass']),
|
||||
stylus: generateLoaders(['css', 'stylus']),
|
||||
styl: generateLoaders(['css', 'stylus'])
|
||||
}
|
||||
}
|
||||
|
||||
// Generate loaders for standalone style files (outside of .vue)
|
||||
exports.styleLoaders = function (options) {
|
||||
var output = []
|
||||
var loaders = exports.cssLoaders(options)
|
||||
for (var extension in loaders) {
|
||||
var loader = loaders[extension]
|
||||
output.push({
|
||||
test: new RegExp('\\.' + extension + '$'),
|
||||
loader: loader
|
||||
})
|
||||
}
|
||||
return output
|
||||
}
|
||||
77
build/webpack.base.conf.js
Normal file
77
build/webpack.base.conf.js
Normal file
@ -0,0 +1,77 @@
|
||||
var path = require('path')
|
||||
var config = require('../config')
|
||||
var utils = require('./utils')
|
||||
var projectRoot = path.resolve(__dirname, '../')
|
||||
|
||||
var env = process.env.NODE_ENV
|
||||
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
|
||||
// various preprocessor loaders added to vue-loader at the end of this file
|
||||
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
|
||||
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
|
||||
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
},
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
|
||||
filename: '[name].js'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.vue'],
|
||||
fallback: [path.join(__dirname, '../node_modules')],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.common.js',
|
||||
'src': path.resolve(__dirname, '../src'),
|
||||
'assets': path.resolve(__dirname, '../src/assets'),
|
||||
'components': path.resolve(__dirname, '../src/components')
|
||||
}
|
||||
},
|
||||
resolveLoader: {
|
||||
fallback: [path.join(__dirname, '../node_modules')]
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
include: projectRoot,
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json'
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||
loader: 'url',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('img/[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||
loader: 'url',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
vue: {
|
||||
loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
|
||||
postcss: [
|
||||
require('autoprefixer')({
|
||||
browsers: ['last 2 versions']
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
34
build/webpack.dev.conf.js
Normal file
34
build/webpack.dev.conf.js
Normal file
@ -0,0 +1,34 @@
|
||||
var config = require('../config')
|
||||
var webpack = require('webpack')
|
||||
var merge = require('webpack-merge')
|
||||
var utils = require('./utils')
|
||||
var baseWebpackConfig = require('./webpack.base.conf')
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
|
||||
// add hot-reload related code to entry chunks
|
||||
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
|
||||
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
|
||||
})
|
||||
|
||||
module.exports = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
|
||||
},
|
||||
// eval-source-map is faster for development
|
||||
devtool: '#eval-source-map',
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': config.dev.env
|
||||
}),
|
||||
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
|
||||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoErrorsPlugin(),
|
||||
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: 'index.html',
|
||||
inject: true
|
||||
})
|
||||
]
|
||||
})
|
||||
98
build/webpack.prod.conf.js
Normal file
98
build/webpack.prod.conf.js
Normal file
@ -0,0 +1,98 @@
|
||||
var path = require('path')
|
||||
var config = require('../config')
|
||||
var utils = require('./utils')
|
||||
var webpack = require('webpack')
|
||||
var merge = require('webpack-merge')
|
||||
var baseWebpackConfig = require('./webpack.base.conf')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var env = config.build.env
|
||||
|
||||
var webpackConfig = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
|
||||
},
|
||||
devtool: config.build.productionSourceMap ? '#source-map' : false,
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
filename: utils.assetsPath('js/[name].[chunkhash].js'),
|
||||
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
|
||||
},
|
||||
vue: {
|
||||
loaders: utils.cssLoaders({
|
||||
sourceMap: config.build.productionSourceMap,
|
||||
extract: true
|
||||
})
|
||||
},
|
||||
plugins: [
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': env
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurrenceOrderPlugin(),
|
||||
// extract css into its own file
|
||||
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
|
||||
// generate dist index.html with correct asset hash for caching.
|
||||
// you can customize output by editing /index.html
|
||||
// see https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: config.build.index,
|
||||
template: 'index.html',
|
||||
inject: true,
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeAttributeQuotes: true
|
||||
// more options:
|
||||
// https://github.com/kangax/html-minifier#options-quick-reference
|
||||
},
|
||||
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
||||
chunksSortMode: 'dependency'
|
||||
}),
|
||||
// split vendor js into its own file
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks: function (module, count) {
|
||||
// any required modules inside node_modules are extracted to vendor
|
||||
return (
|
||||
module.resource &&
|
||||
/\.js$/.test(module.resource) &&
|
||||
module.resource.indexOf(
|
||||
path.join(__dirname, '../node_modules')
|
||||
) === 0
|
||||
)
|
||||
}
|
||||
}),
|
||||
// extract webpack runtime and module manifest to its own file in order to
|
||||
// prevent vendor hash from being updated whenever app bundle is updated
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'manifest',
|
||||
chunks: ['vendor']
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
if (config.build.productionGzip) {
|
||||
var CompressionWebpackPlugin = require('compression-webpack-plugin')
|
||||
|
||||
webpackConfig.plugins.push(
|
||||
new CompressionWebpackPlugin({
|
||||
asset: '[path].gz[query]',
|
||||
algorithm: 'gzip',
|
||||
test: new RegExp(
|
||||
'\\.(' +
|
||||
config.build.productionGzipExtensions.join('|') +
|
||||
')$'
|
||||
),
|
||||
threshold: 10240,
|
||||
minRatio: 0.8
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = webpackConfig
|
||||
6
config/dev.env.js
Normal file
6
config/dev.env.js
Normal file
@ -0,0 +1,6 @@
|
||||
var merge = require('webpack-merge')
|
||||
var prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
32
config/index.js
Normal file
32
config/index.js
Normal file
@ -0,0 +1,32 @@
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
var path = require('path')
|
||||
|
||||
module.exports = {
|
||||
build: {
|
||||
env: require('./prod.env'),
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
productionSourceMap: true,
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css']
|
||||
},
|
||||
dev: {
|
||||
env: require('./dev.env'),
|
||||
port: 8080,
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
// with this option, according to the CSS-Loader README
|
||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
// In our experience, they generally work as expected,
|
||||
// just be aware of this issue when enabling this option.
|
||||
cssSourceMap: false
|
||||
}
|
||||
}
|
||||
3
config/prod.env.js
Normal file
3
config/prod.env.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
18
index.html
Normal file
18
index.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-touch-fullscreen" content="yes">
|
||||
<meta name="full-screen" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="format-detection" content="address=no">
|
||||
<title>vue2spa</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
53
package.json
Normal file
53
package.json
Normal file
@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "vue2spa",
|
||||
"version": "1.0.0",
|
||||
"description": "A Vue.js project",
|
||||
"author": "xsf <416175716@qq.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "node build/dev-server.js",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.15.3",
|
||||
"vue": "^2.1.0",
|
||||
"vue-router": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.4.0",
|
||||
"babel-core": "^6.0.0",
|
||||
"babel-loader": "^6.0.0",
|
||||
"babel-plugin-transform-runtime": "^6.0.0",
|
||||
"babel-preset-es2015": "^6.0.0",
|
||||
"babel-preset-stage-2": "^6.0.0",
|
||||
"babel-register": "^6.0.0",
|
||||
"chalk": "^1.1.3",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"css-loader": "^0.25.0",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.13.3",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.9.0",
|
||||
"function-bind": "^1.0.2",
|
||||
"html-webpack-plugin": "^2.8.1",
|
||||
"http-proxy-middleware": "^0.17.2",
|
||||
"json-loader": "^0.5.4",
|
||||
"semver": "^5.3.0",
|
||||
"opn": "^4.0.2",
|
||||
"ora": "^0.3.0",
|
||||
"shelljs": "^0.7.4",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue-loader": "^10.0.0",
|
||||
"vue-router": "^2.0.3",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"vue-template-compiler": "^2.1.0",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-middleware": "^1.8.3",
|
||||
"webpack-hot-middleware": "^2.12.2",
|
||||
"webpack-merge": "^0.14.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
}
|
||||
}
|
||||
BIN
screenShot/20160824203433387.png
Normal file
BIN
screenShot/20160824203433387.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
screenShot/lifecycle.png
Normal file
BIN
screenShot/lifecycle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
31
src/App.vue
Normal file
31
src/App.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<!-- 首页内容渲染 -->
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!-- 可以删掉 顶部 -->
|
||||
<HeaderCompontent></HeaderCompontent>
|
||||
|
||||
<!-- 渲染出口 -->
|
||||
<router-view></router-view>
|
||||
|
||||
<!-- 可以删除 底部菜单 -->
|
||||
<FootComponent></FootComponent>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import './css/common.css'
|
||||
import HeaderCompontent from './components/header.vue'
|
||||
import FootComponent from './components/footer.vue'
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
msg:'Hello vue',
|
||||
}
|
||||
},
|
||||
components:{
|
||||
HeaderCompontent,
|
||||
FootComponent
|
||||
}
|
||||
}
|
||||
</script>
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
33
src/components/Hello.vue
Normal file
33
src/components/Hello.vue
Normal file
@ -0,0 +1,33 @@
|
||||
|
||||
<!-- 需要组件再去使用 -->
|
||||
|
||||
<!--
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Router Links</h2>
|
||||
<ul>
|
||||
<li><router-link to="/index">点我跳转到第一页</router-link></li>
|
||||
<li><router-link to="/second">点我跳转到第二页</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hello',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App',
|
||||
test: 'test'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1{
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
-->
|
||||
47
src/components/footer.vue
Normal file
47
src/components/footer.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<footer class="fixed-bottom clearfix">
|
||||
<div class="col4">
|
||||
<router-link to="/index">index</router-link>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<router-link to="/news">news</router-link>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<router-link to="/second">menu3</router-link>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<router-link to="/second">menu4</router-link>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
msg: 'Hello vue'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<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>
|
||||
25
src/components/header.vue
Normal file
25
src/components/header.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<img src="../assets/logo.png">
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
msg: 'Hello vue'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.header{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header img{
|
||||
width: 50%;
|
||||
margin: 30px auto 0;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
80
src/css/common.css
Normal file
80
src/css/common.css
Normal file
@ -0,0 +1,80 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
/* common css */
|
||||
.col2{
|
||||
width: 50%;
|
||||
}
|
||||
.col3{
|
||||
width: 33.33%;
|
||||
}
|
||||
.col4{
|
||||
width: 25%;
|
||||
}
|
||||
.col6{
|
||||
width: 16.66%;
|
||||
}
|
||||
88
src/json/test.json
Normal file
88
src/json/test.json
Normal file
@ -0,0 +1,88 @@
|
||||
{
|
||||
"code": "0",
|
||||
"data": {
|
||||
"msg": "操作成功！",
|
||||
"success": true ,
|
||||
"result": [{
|
||||
"filmId": 0,
|
||||
"name": "樱桃",
|
||||
"mainRole": "苗圃/ 妥国权/ 龙丽",
|
||||
"director": "张加贝",
|
||||
"type": "家庭 文艺 剧情",
|
||||
"area": "中国 日本",
|
||||
"summarize": "剧本根据真人真事改编，从小失去双亲被同村的好心人葛望的母亲收留的樱桃，与患有小儿麻痹的葛望结为夫妻。善良的樱桃偶然在路边捡回一个小孩，不顾家境贫困收养了她。葛望将养女红红偷偷送给别人，樱桃知道后伤心欲绝，挨家挨户寻找红红并最终将其找回。红红上学后，因为母亲的缘故常被同学嘲笑，因此对母亲产生了反感，开始孤立母亲。一次樱桃因冒雨给红红摘樱桃掉进了河中，红红终于体会到母亲对自己的爱。为了报答母亲，红红发奋读书，最终考上了大学，并在大学毕业后回到了家乡。",
|
||||
"url": "http://hcloud.widewisdom.cn/video/accessible/yt.mp4",
|
||||
"img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/yt.jpg"
|
||||
},{
|
||||
"filmId": 1,
|
||||
"name": "生死抉择",
|
||||
"mainRole": "左翎 王庆祥 廖京生",
|
||||
"director": "于本正",
|
||||
"type": "家庭 文艺 剧情",
|
||||
"area": "",
|
||||
"summarize": "北方某省会城市市长李高成自中央党校学习一年后回来，就面临复杂的局面和尖锐的矛盾。一方面，自己出现一个强有力的竞争对手杨诚，他来了才半年，省委就已经任命他主持市委工作，而自己曾经工作过的中阳纺织厂有上千工人准备到市政府请愿，令他大吃一惊。李高成就是该厂的厂长，几十年来它一直是本市纳税大户，但却面临着破产和倒闭……李高成进入中阳纺织厂进行调查，但随着调查的一步步深入，却发现由他一手提拔的中阳纺织厂领导班子存在着集体腐败，自己的妻子吴蔼珍也深深卷入其中，李高成的四弟李宝柱本来在家种田，却成了“青苹果娱乐城”的总经理。这个乌烟瘴气的娱乐城，幕后老板正是中阳纺织厂的领导班子。而所有这些盘根错节的关系网被后，培养他的省委副书记严阵就是其中的关键。李高成面临着痛苦的抉择。最终，在党性和良知的要求下，在杨诚的协助下，李高成做出了一个共产党员应有的选择。",
|
||||
"url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/ssjz.mp4",
|
||||
"img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/ssjz.jpg"
|
||||
},{
|
||||
"filmId": 2,
|
||||
"name": "东京审判",
|
||||
"mainRole": "刘松仁，曾江，英达，朱孝天",
|
||||
"director": "高群书",
|
||||
"type": "犯罪，剧情，历史，战争",
|
||||
"area": "",
|
||||
"summarize": "《东京审判》是由高群书执导，刘松仁、曾江、英达、朱孝天等担任主演的历史纪录片。1946年，远东国际军事法庭在东京审判日本战犯，该法庭由11个国家的11名法官组成。受中国国民政府的委任，以梅汝璈为首的中国法官在大国利益主导的势力挤压下，奋力突围，终于将以东条英机为首的七个战犯送上绞刑架",
|
||||
"url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/djsp.mp4",
|
||||
"img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/djsp.jpg"
|
||||
},{
|
||||
"filmId": 3,
|
||||
"name": "非诚勿扰",
|
||||
"mainRole": "葛优，舒淇，方中信",
|
||||
"director": "冯小刚",
|
||||
"type": "家庭 文艺 剧情",
|
||||
"area": "中国 日本",
|
||||
"summarize": "海归秦奋（葛优饰）的天才发明“分歧终端机”因能公平和平地解决人类分歧，被风投者以200万英镑高价买走。秦奋也开始踏上网上征婚的路途，一路笑话不断，不是重遇Gay友，就是遇到推销客，秦奋颇有点心灰意冷，以致遇到清冷女子梁笑笑（舒淇饰）时便开门见山请求对方说明来意。这次更为棘手，笑笑爱上有妇之夫，陷于苦恋中不停挣扎，这次纯属听从家里人安排才出来与秦奋见上一面。不再打算再见的二人尽情地分享了生命中最隐秘的秘密。然而不久，打算和旧爱分手的笑笑找到秦奋，说要嫁给他，但想与他先去北海道一趟。因她与旧爱的爱情是在那里开始的，如今想在那里结束。秦奋答应了。二人踏上北海道之旅，秦奋在北海道的老友对他们盛情招待，三人游遍北海道各处，秦奋知道自己得不到笑笑的心，却不知道笑笑心中抑郁难解的结正冲向海底的漩涡……",
|
||||
"url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/fcwr.mp4",
|
||||
"img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/fcwr.jpg"
|
||||
},{
|
||||
"filmId": 4,
|
||||
"name": "洒满阳光的路上",
|
||||
"mainRole": "王若涵 王光辉 王澜 李易峰",
|
||||
"director": "李宝生",
|
||||
"type": "家庭 文艺 剧情",
|
||||
"area": "中国 日本",
|
||||
"summarize": "《洒满阳光的路上》讲述的是一个富二代女孩子与大别山里的孩子共同成长的故事。影片由中共合肥市委宣传部与北京森林奇艺影视文化传媒有限公司联合出品，将在合肥肥西三河古镇等地取景。 大别山区物质匮乏的生活坏境让周菲菲难以忍受，但是山里孩子们的纯真与质朴以及革命老区人民的古道热肠都深深感染了她，让她无法撤身。虽然生活清贫，但人们依然不忘周济更困难的家庭；虽然学校条件简陋，但是孩子们始终对未来满怀希望……",
|
||||
"url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/smygdls.mp4",
|
||||
"img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/smygdls.jpg"
|
||||
},{
|
||||
"filmId": 5,
|
||||
"name": "跑出一片天",
|
||||
"mainRole": "麦咏麟 李远",
|
||||
"director": "张加贝",
|
||||
"type": "家庭 文艺 剧情",
|
||||
"area": "中国 日本",
|
||||
"summarize": "单身家庭长大的男孩李小天（苗雅宁饰），从小就有跑步天赋，可惜身高不够，常被同学嘲笑。爸爸飞雄（常铖饰）以卖砂锅为生，一心望子成龙，只希望他用功读书，却忽视了小天了梦想——跑步和有一个妈妈！父子因此产生隔阂。大眼仔（田亮饰）看中小天的资质，带他参加“酷跑之夜”，认识了跑酷高手蝎子（杨幂饰）、裁判（何晟铭饰）、Cindy(戚薇饰)等人。在大家帮助下，小天重拾信心，刻苦训练，一场热血严格的比赛同时也摆在了他的面前",
|
||||
"url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/pcypt.mp4",
|
||||
"img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/pcypt.jpg"
|
||||
},{
|
||||
"filmId": 6,
|
||||
"name": "辛亥革命",
|
||||
"mainRole": "成龙/ 张黎",
|
||||
"director": "张加贝",
|
||||
"type": "家庭 文艺 剧情",
|
||||
"area": "中国 日本",
|
||||
"summarize": "19世纪末20世纪初，清王朝三百年江山气数将近，内忧外患，时局动荡，正是乱世之际，英雄辈出，中华民族面临着重大的历史变革。以孙中山（赵文瑄 饰）为首的仁人志士意识到只有民主共和才能救中国，他们组成一个个革命政党，旨在推翻满清政府，建立人民当家作主的民主国家。 在这一过程中，无数革命者流血牺牲，但是更多的革命家站出来与落后的封建体制作斗争，终于在武昌打响了辛亥革命的第一枪。在此期间，黄兴（成龙 饰）、黎元洪（姜武 饰）、隆裕太后（陈冲 饰）、袁世凯（孙淳 饰）、汪精卫（余少群 饰）、宋教仁（邢桂栋 饰）、秋瑾（宁静 饰）等各方人物你方唱罢我登场，谱写了中国近代史上最为辉煌的篇章……",
|
||||
"url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/xhgm.mp4",
|
||||
"img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/xhgm.jpg"
|
||||
},{
|
||||
"filmId": 7,
|
||||
"name": "大灌篮",
|
||||
"mainRole": "周杰伦，曾志伟，蔡卓妍，王刚，陈柏霖，吴孟达，吴宗宪",
|
||||
"director": "朱延平(动作导演：程小东)",
|
||||
"type": "",
|
||||
"area": "中国",
|
||||
"summarize": "世杰是一个见义勇为、好打不平的孤儿，被功夫大学的老校长收养，从小习武，有一身好功夫，也有“中投”的神技，可惜的是，和接任的校长朱标不对盘，被拿来当练习的“人肉沙包”，就连四大高手也没出面帮他。新任功夫大学校长，爱钱又势利，当然看不惯世杰打着老校长养子的名号，在学校白吃白喝，也当然会借故编派罪名将世杰驱逐出校门。 世杰流浪到公园，无意中展现“中投”神技，被“公园混混管区”王立看上，利用世杰是孤儿，诱之以“打球可以成名、成名之后可以寻亲”，骗世杰去打篮球，藉此赚取世杰打球“中投”而来的知名度和利益，中饱私囊。 王立说服世杰打篮球之后，带着世杰来到第一大学说服周校长让世杰加入球队。世杰死命的要引起莉莉的注意，可恨的是，莉莉全部的注意力都在篮球校队的风云人物箫风身上，于是世杰发誓，他一定要在篮球场上给箫风好看。于是，每每球赛时就会发生诡异的现象，明明要合作对抗外敌，世杰却是处处找同队箫风的麻烦。另一方面，篮球界的叛徒李天，和大恐龙有私人恩怨，看不惯第一大学因为世杰的加入气势如日中天，于是向他们挑衅比赛，找来了藉着官高位重，到处收购土地趁机发财的毕议员合作，发誓绝对要把第一大学打得落花流水。历经千辛万苦，终于球赛打胜了。最后，世杰和莉莉结婚，生下小孩，从此过着幸福快乐的日子。",
|
||||
"url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/dgl.mp4",
|
||||
"img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/dgl.jpg"
|
||||
}]
|
||||
}
|
||||
}
|
||||
10
src/main.js
Normal file
10
src/main.js
Normal file
@ -0,0 +1,10 @@
|
||||
/* 项目启动 */
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
new Vue({
|
||||
router: router,
|
||||
render: h => h(App)
|
||||
// components: { firstcomponent, secondcomponent }
|
||||
}).$mount('#app')
|
||||
63
src/pages/index.vue
Normal file
63
src/pages/index.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>{{msg}}</h1>
|
||||
<button v-on:click="fn2()">点我看控制台</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// ajax 使用官方推荐的 axios
|
||||
import axios from 'axios'
|
||||
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
msg:'这个页面包含了使用axios去请求ajax数据和其他事件方法',
|
||||
otherData: '测试',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
console.log("初始化加载数据开始...");
|
||||
axios.get('/json/test.json', {
|
||||
params: {
|
||||
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log(response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
fn1: function(){
|
||||
console.log("这是点击事件!");
|
||||
},
|
||||
fn2: function(){
|
||||
console.log("点击事件2");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1{
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
h4{
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
p,spa{
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
button{
|
||||
background: orange;
|
||||
display: block;
|
||||
margin: 80px auto;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
95
src/pages/news.vue
Normal file
95
src/pages/news.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<h4>啥玩意儿？</h4>
|
||||
{{lifecycle}}
|
||||
</template>
|
||||
|
||||
<!-- 下面您就随便看看 帮助理解vue的生命周期 -->
|
||||
<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>
|
||||
15
src/pages/otherPages.vue
Normal file
15
src/pages/otherPages.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div id="secondcomponent">
|
||||
<h4>这是来自其他路由的内容!</h4>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
test: 'hello'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
src/router/index.js
Normal file
30
src/router/index.js
Normal file
@ -0,0 +1,30 @@
|
||||
/* 路由配置全写这里 */
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
/* 开启debug模式 */
|
||||
Vue.config.debug = true
|
||||
Vue.use(VueRouter);
|
||||
|
||||
import secondcomponent from '../pages/otherPages.vue'
|
||||
import Index from '../pages/index.vue'
|
||||
import News from '../pages/news.vue'
|
||||
|
||||
export default new VueRouter({
|
||||
mode: 'history',
|
||||
base: __dirname,
|
||||
routes: [
|
||||
{
|
||||
path: '/index',
|
||||
component: Index
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
component: News
|
||||
},
|
||||
{
|
||||
path: '/second',
|
||||
component: secondcomponent
|
||||
}
|
||||
]
|
||||
})
|
||||
0
static/.gitkeep
Normal file
0
static/.gitkeep
Normal file
Loading…
x
Reference in New Issue
Block a user