VUE的项目的创建及使用

VUE的项目的创建及使用

安装cnpm（可以不安装）

     npm install -g cnpm

第一部分：创建Vue项目

步骤（一）：全局安装vue-cli脚手架工具

1.右击文件夹，选择在终端中打开

2.输入下列代码并回车

cnpm install -g @vue/cli

3.如果显示

cnpm : 无法加载文件 F:\Nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。

是因为没有权限，需要用管理员身份进行运行并授权

则打开Powershell输入下列代码并回车

set-ExecutionPolicy RemoteSigned

然后再输入‘y’
4.重新执行第 2 步即可

步骤（二）：使用“vue-cli”创建项目

1.在终端下运行vue create demo

demo是你新建的一个文件夹

2.选择

Manually select features

3.选择下列后回车

choose Vue version
Babel
Vuex
Roter
Vuex

4.选择

2.x

5.选择 n

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

6.选择第一个

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
In package.json

7.写个名字记录这种创建选择，回车

步骤（三）：在浏览器中打开vue项目

1.打开新终端

2.在终端中输入下列命令,来进入demo文件夹下

cd Vue

cd demo

ps:这里的Vue是我创建的一个文件夹,我讲demo文件夹放到Vue中方便阅读

3.输入npm run serve 或者cnpm run serve 回车

4.这时会出现两个网站，ctrl+左键点击其中一个即可在浏览器中打开vue项目

第二部分：直接使用Vue的功能

方法一 ：CDN形式

直接用引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

方法二 ：NPM形式

打开终端输入下列命令行后回车

npm install vue