1. Install the node environment
1. The download address is: https://nodejs.org/en/
2. Check whether the installation is successful: If the version number is output, it means that we successfully installed the node environment
3. In order to improve our efficiency, we can use the mirror image of Taobao: http://npm.taobao.org/
Enter: npm install -g cnpm --registry=https://registry.npm.taobao.org, you can install the npm image, and use cnpm instead of npm in the future.
Check if the installation was successful:
Second, build the Vue project environment
1. Install vue-cli globally
npm install --global vue-cli
2. Go to your project directory and create a new project based on the webpack template
illustrate:
Vue build ==> packaging method, just press Enter;
Install vue-router ==> Whether to install vue-router, it must be used in the project, so Y press Enter;
Use ESLint to lint your code ==> Do you need js syntax detection currently we don't need so n press Enter;
Set up unit tests ==> Whether to install the unit test tool currently we do not need so n press Enter;
Setup e2e tests with Nightwatch ==> Do you need an end-to-end testing tool? Currently we don't need it, so n press Enter;
3. Enter the project: cd vue-demo, install dependencies
After the installation is successful, there will be an additional directory in the project folder: node_modules
4. npm run dev, start the project
The project started successfully:
Three, vue project directory explanation
1. build: build script directory
1) build.js ==> production environment build script;
2) check-versions.js ==> check npm, node.js version;
3) utils.js ==> build related tool methods;
4) vue-loader.conf.js ==> The css loader is configured and the prefix is automatically added after compiling css;
5) webpack.base.conf.js ==> webpack basic configuration;
6) webpack.dev.conf.js ==> webpack development environment configuration;
7) webpack.prod.conf.js ==> webpack production environment configuration;
2, config: project configuration
1) dev.env.js ==> development environment variables;
2) index.js ==> project configuration file;
3) prod.env.js ==> production environment variables;
3. node_modules: project dependent modules loaded by npm
4. src: Here is the directory we want to develop, and basically everything to be done is in this directory. It contains several directories and files:
1) assets: resource directory, place some pictures or public js and public css. The resources here will be built by webpack;
2) components: component directory, the components we write are placed in this directory;
3) router: front-end routing, the routing path we need to configure is written in index.js;
4) App.vue: root component;
5) main.js: entry js file;
5, static: static resource directory, such as pictures, fonts, etc. won't be built by webpack
6. index.html: home page entry file, you can add some meta information, etc.
7. package.json: npm package configuration file, which defines the project's npm script, dependent packages and other information
8. README.md: the description document of the project, in markdown format
9. .xxxx files: These are some configuration files, including syntax configuration, git configuration, etc.
Fourth, start our first vue project
1. Create a new views directory in the components directory and write our vue components in it
1) Start our first component:
a: Create a new First.vue in the views directory
b: Configure the routing path in index.js in the router directory
c: template to write html, script to write js, style to write style
d: Enter ip: http://localhost:8010/#/first to view the page effect
Notice:
There can only be one side-by-side div under a component, the following is wrong:
The data should be written in the return, not like the document. The following spelling is wrong:
2. Talk about parent-child components
1) Create a new sub folder in the components directory to store sub-components that can be reused. For example, create a new Confirm.vue component
3) Introduce child components into parent components
引入：import Confirm from '../sub/Confirm'
Registration: <script></script>add components: {Confirm} after the name block in the tag
Use: add <confirm></confirm> <template></template>inside
Full code:
2) Parent-child component communication
Subassembly:
Parent component:
3. Use routing to build a single-page application
1) According to the above method, create a new Second.vue component
2) Routing jump: <router-link to="/second">Go to the second page</router-link>
After the route jumps, pay attention to observe the path changes:
As you can see, it is parsed into a tag in html
Here is just a brief introduction to the use of routing. For more details, please go to the official website to learn: https://router.vuejs.org/zh-cn/
4. How to write styles with less
1) Install less dependencies: npm install less less-loader --save
After the installation is successful, you can see in package.json that two more modules have been added:
2) write less
5. Supplement
1. Solve the problem that vue cannot automatically open the browser: when we enter npm run dev to run the project, the command line prompts us to run successfully, but the browser does not automatically open, so we can only enter it manually.
solve:
1) Open config ==> index.js
2) autoOpenBrowser is found in the module.exports configuration, the default setting is false
3) Change autoOpenBrowser to true
4) Ctrl+C, and then we restart, the browser can be opened automatically
2. In order to avoid port conflicts, you can also modify the port and open the directory as above
Successfully modified:
