Vue Study [1]: Vue Setup
Description
The article for vue.js Setup.
Original post link:https://www.cnblogs.com/markjiang7m2/p/10783456.html
Source code:https://gitee.com/Sevenm2/Vue.Web/tree/master/Vue.Web
Development Environment Preparation
Node.js
If we want to develop Vue.js, we should install Node.js firstly.
Actually I have installed Node.js in my environment when I started my another repository TaxSystem, but without any note to mark down the action. I will write down the procedure here.
1.Install Node.js
Download Node.js install package from nodejs.org and install. You should select your version.
Set environment variables
And then you can input the command line to verify if Node.js is installed successfully.
node -v npm -v
2.Environment Configuration
The node cache files and global modules will be installed and saved into
C:\Users\xxx\AppData\Roaming\npmby default. We have better to change the path as our system disk space is limited.
Create 2 folders
node_global&
node_cache
Reset the configuration in CMD.
npm config set prefix "D:\Mark\nodejs\node_global" npm config set cache "D:\Mark\nodejs\node_cache"
Add the environment variables
vue-cli
Install
vue-clias a global module.
npm install -g vue-cli
Input a command line to verify if
vue-cliis installed successfully.
Setup a vue project
Use Visual Studio Code to open the folder you want to create the project in.
Click
Ctrl+
~to open the Terminal.
Input the below command line to new a project based on webpack and select the setting as requested.
vue init webpack projectname
Config the PORT No.
Enter the project folder and run the project
cd Vue.Web npm run dev
Then we can view the Website in browser.
We can also build the project
npm run build .
vetur
It is an extension Vue tooling for VS Code.
1.Install vetur
Click
Ctrl+
P, input
ext install vetur, then install the extension.
2.Add the below in User settings
Click
Ctrl+
Shift+
P, input
Preferences: Open User Settings.
Add the below in User settings
"emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }
Build Setup command line
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test
- [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
- Vue Study [2]: Vue Router
- [vue]使用自定义指令实现表单校验
- Vue.js之构建项目初始步骤(二)
- vue-cli脚手架build目录下utils.js工具配置文件详解
- npm、vue开发环境搭建及路由介绍
- vue解决一个方法同时发送多个请求的问题
- vue:Vuex
- Weblogic 10.3 insallment and Cluster setup - 3
- webpack-vue全家桶之实现border-1px
- Vue的字符串模板
- 有关Vue.js中的v-model的说明
- vue2.0之多页面的开发
- Vue.js介绍
- vue 项目实战 (生命周期钩子)
- 开发过程中vue项目保存编译慢优化方法
- use ffmpeg to setup streaming server on android
- vue-router: 嵌套路由
- vue路由vue-router的使用
- Vue组件实现分页