How to create a vue.js project

Method: First install node and cnpm; then use the "npm install --global vue-cli" command to install vue-cli; then use the "vue init webpack project name" command to create the project; finally enter the project directory, Use the "cnpm i" command to install dependencies.

Related recommendations: "vue.js Tutorial"

The operating environment of this tutorial: windows7 system, vue2.9 version, Dell G3 computer.

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 installed the node environment successfully

　3. In order to improve For our efficiency, we can use Taobao's mirror: http://npm.taobao.org/

Input: npm install -g cnpm –registry=https://registry.npm.taobao.org , you can install the npm image. If npm is used in the future, just use cnpm instead.

Check whether the installation is successful:

2. Build the vue project environment

　1. Install vue-cli globally

　<span class="line">npm install --global vue-cli</span>

　2. Enter your project directory, Create a new project based on the webpack template: vue init webpack project name

##　　　Vue build ==> Packaging method, just press Enter;

　　Install vue-router ==> Do you want to install vue-router? You must use it in the project, so press Enter;

　　 Use ESLint to lint your code ==> Whether you need js syntax detection at present We don’t need so n Enter;

Set up unit tests ==> Whether to install unit testing tools Currently we don’t need so n Enter;

Setup e2e tests with Nightwatch ==> ; Do we need end-to-end testing tools? We don’t need it at the moment, so 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 starts successfully:

3. Explanation of vue project directory

　<br>

　1. build: Build script directory

<br>## 　　 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 the css;

5) webpack.base.conf.js ==> Webpack basic configuration;

　　6) webpack.dev.conf.js ==> webpack development environment configuration; => 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: This is the directory we want to develop, basically Everything you need to do is in this directory. It contains several directories and files:

1) assets: resource directory, where some pictures or public js and public css are placed. 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 we need to configure The path 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. Will not 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, defines the npm script of the project , dependency packages and other information<br>

8. README.md: Project description document, markdown format

9. .xxxx files: These are some configuration files , including syntax configuration, git configuration, etc.

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of How to create a vue.js project. For more information, please follow other related articles on the PHP Chinese website!