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)
- 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 to choose 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 the service
cd exprice
npm install
npm run dev
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 put
-
Use LESS
LESS
Install
Less –save-dev
less-loader –-seave-dev
Step 2: Configure in the configuration file
Build the project through vue-cli, this step can be omitted.
In webpack.dev.conf.js, you can see the following code:
After the installation is successful, open build/webpack.base.conf.js and add a paragraph after module.rules of the object of module.exports =:
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
}
Add the lang="less" attribute to the style tag in the code~
<style scoped lang="less">
</style>
>
Using Font Icons in VUE-CIL Projects
font-awesome
npm install font-awesome
add
import 'font-awesome/css/font-awesome.css' in main.js
Method Two:
Download the code on the official website to the local, it should be font-awesome-4.7 now, put the entire folder in the static folder, and then add <link rel="stylesheet" href="/static/font- awesome-4.7/css/font-awesome.min.css">, should be fine.
Here it points to the src folder;
./: the current directory;
../: the parent directory;