ps: If you want to know more about Vue, please click the summary of Vue learning catalogue
As one of the three front-end frameworks, Vue has received 44,873 stars on github so far, which is enough to show that it has quietly become the mainstream. In October 2016, Vue released version 2.x. After a period of exploration and watching official tutorials and APIs, I learned that version 2.0 has made a lot of adjustments on the basis of version 1.0, and abandoned many APIs. . . Not much nonsense, I will tell you about the pit I stepped on here, I hope it will be helpful to beginners. ps: Experts please detour.
Note: This article refers to the technical sharing of some predecessors on the Internet, and summarizes it by myself. This article is a vue project based on webpack and implements a simple single-page application. The relevant technologies used will be briefly explained
1. Then we start with the simplest environment setup:
- Install node.js, download and install node from the node.js official website , the installation process is very simple, all the way to the "next step" (fool installation). After the installation is complete, open the command line tool (win+r, then enter cmd), enter node -v, as shown in the figure below, if the corresponding version number appears, the installation is successful.
It needs to be explained here, because after downloading and installing node.js on the official website, it already comes with npm (package management tool), and it should be noted that the version of npm is preferably 3.xx or above, so as not to affect the follow-up.
- Install the Taobao image, open the command line tool, and copy this (npm install -g cnpm --registry= https://registry.npm.taobao.org ) (the manual copy here is to use the right mouse button, why not many? Explanation), the installation here is because the npm server we use is foreign, and sometimes when we install "dependencies", it is very slow, very slow, and super slow, so we use this cnpm to install the "dependencies" we need. After the installation is complete, enter cnpm -v, as shown in the figure below. If the corresponding version number appears, the installation is successful.
-
Install webpack, open the command line tool and enter: npm install webpack -g, after the installation is complete, enter webpack -v, as shown in the figure below, if the corresponding version number appears, the installation is successful.
-
Install the vue-cli scaffolding build tool, open the command line tool and enter: npm install vue-cli -g, after the installation is complete, enter vue -V (note the capital "V" here), as shown below, if the corresponding version number appears, The installation is successful.
2. Through the above four steps, the environment and tools we need to prepare are ready, and then we start to use vue-cli to build the project
- Find a folder on your hard drive for the project. There are two ways to specify to the relevant directory: ①cd directory path ②If you install git, right-click on the relevant directory and select Git Bash Here
- Install vue scaffolding and input: vue init webpack exprice, note that "exprice" here is the name of the project, which can be named casually, but the main thing is "can't use Chinese".
$ vue init webpack exprice --------------------- This is the command to install the vue scaffolding
This will install Vue 2.x version of the template. ---- -----------------Here shows that a vue 2.x version project will be created.
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) -- -------------------Project name
? Project name exprice
? Project description (A Vue.js project) --------------- ------Project description
? Project description A Vue.js project
? Author Datura --------------------- Project creator
? Author Datura
? Vue build ( Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- Whether to install Vue routing, that is, spa in the future (but a module required by the page application)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------Whether to enable eslint detection rules, here I suggest selecting no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue -cli · Generated "exprice".
To get started: --------------------- Here is how to start this service
cd exprice
npm install
npm run dev
as shown below:
- cd command to enter the created project directory, first cd exprice (here is the name of the project you built);
- Install project dependencies: npm install, because the package.json file already exists in the automatic build process, so just install the dependencies directly here. Do not install from the domestic mirror cnpm (it will cause a lot of dependency libraries to be missing later), but if you really install "a handful" of hours without success, then use: cnpm install
- Install the vue routing module vue-router and the network request module vue-resource, enter: cnpm install vue-router vue-resource --save.
The created "exprice" directory is as follows:
Below I briefly explain what each directory is for:
-
Start the project and enter: npm run dev. After the service starts successfully, the browser will open a "welcome page" by default, as shown below:
Note: The default service here is to start the local port 8080, so please make sure that your 8080 port is not occupied by other programs.
So far, a simple project has been built.... I will continue to use this built project to write a simple single-page application.
See here to recommend an ide to use Atom and then install the vue plug-in, very easy to use
Author: datura_lj
Link: https://www.jianshu.com/p/1626b8643676
Source : Jianshu The
copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.