Vue's way to climb pits: a brief introduction to vue and the use of vue-cli scaffolding tools to quickly build projects

About Vue.js
Vue.js is a front-end MVVM framework that is very popular recently, similar to Angular, but easier to use, and because the author is Chinese, the Chinese documentation of Vue.js is relatively complete, and many problems can be solved. Solved in the official website documentation !


To install Vue.js using cnpm
, you must first download npm. If you have downloaded node.js, you don’t need to download it. Those who haven’t downloaded it can download node.js. There is npm integrated in it. It is best to open the command prompt shift+ in the corresponding directory. Right click the mouse and choose to open the command line here, or you can directly open npm and switch to the corresponding directory. Because npm is a foreign country, it is relatively slow, so switch back to Taobao's cnpm, and enter the following code to install cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

After the installation is complete, upgrade cnpm

cnpm install cnpm -g

After the upgrade is complete, you can directly use cnpm to install vue, js

cnpm install vue

After installing vue, install the scaffolding tool vue-cli

cnpm install --global vue-cli

Next, you can use vue-cli to quickly create a project. At this time, you can first select the storage directory of your project to switch the directory command cd, and then enter the vue build command:

vue init webpack "项目名称"

write picture description here

After inputting the project, a bunch of options will appear. The specific meanings are:
1: The project name only supports lowercase'
2: The project description can also be defaulted
3: The author's name
4': What mode to use, the default is OK
5: Whether to install routing management Yes
6: Whether to use ESLint is more standardized, I choose not to use
7, 8: Whether it is necessary to test to see personal needs


To see if the installation is successful, switch to the project directory:
cd E:\Programming Documentation\new-novel Change to your own project directory and enter the command (the first command installs dependencies):

cnpm install 
npm run dev

write picture description here
See that my port is 8081, because I have port 8080 occupied, the default port is 8080, after entering the URL, you can see the following interface to prove that the construction is complete
write picture description here

The construction is completed here. The next article will introduce the general directory structure and make a basic login interface, using a login interface I wrote before. Simple basic understanding of Net WebApi entry (automatic generation of api documents and simple tests) )

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324859238&siteId=291194637